uni-app nvue 使用 uni-load-more 不显示

uni-app nvue 使用 uni-load-more 不显示

测试过的手机

Redmi K30 Android 10; 华为 p30pro Android 10; iPhoneXR iOS 14.5.1 ; iPhoneX iOS 14.5.1

示例代码

<uni-load-more :status="more"></uni-load-more>  

data() {  
   return {  
    more: 'more'  
   };  
},  

// 组件里源代码  
<!-- #ifdef APP-NVUE -->  
<loading-indicator v-if="!webviewHide && status === 'loading' && showIcon"  
    :style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true"  
    class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>  
<!-- #endif -->  
特殊子组件 <loading-indicator>: 只能作为 <refresh> 和 <loading> 的子组件使用，拥有默认的动画效果实现。  
这个是不是应该放在 <refresh> 和 <loading>  这个里边？

操作步骤

<uni-load-more :status="more"></uni-load-more>  

data() {  
   return {  
    more: 'more'  
   };  
},

预期结果

在nvue 页面显示加载更多

实际结果

没有显示

bug描述

uni-load-more 组件 在 nvue 页面不显示。


更多关于uni-app nvue 使用 uni-load-more 不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

提交错了

更多关于uni-app nvue 使用 uni-load-more 不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


此问题已解决了吗？

回复 DCloud_UNI_Anne: 解决了 谢谢您

根据您描述的问题，uni-load-more组件在nvue页面不显示是因为nvue环境下对loading-indicator组件的使用限制。在nvue中，loading-indicator必须作为<refresh>或<loading>的子组件才能正常显示。

解决方案：

  1. 对于nvue页面，建议改用原生<loading>组件：
<loading v-if="status==='loading'" class="uni-load-more__img"></loading>
  1. 或者修改条件编译部分代码：
<!-- #ifdef APP-NVUE -->
<loading>
    <loading-indicator v-if="!webviewHide && status === 'loading' && showIcon"
        :style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true"
        class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
</loading>
<!-- #endif -->
  1. 也可以考虑使用weex原生组件：
<!-- #ifdef APP-NVUE -->
<loading-indicator v-if="!webviewHide && status === 'loading' && showIcon"
    :style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true"
    class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
<!-- #endif -->
回到顶部