uni-app nuve list 组件和 waterfall 组件子组件 loading 只在 iOS 下有效果，安卓机无效

项目信息	详细信息
产品分类	uniapp/App
PC开发环境	Windows
PC开发环境版本	win10
HBuilderX类型	正式
HBuilderX版本	3.4.7
手机系统	全部
手机系统版本	iOS 14
手机厂商	苹果
页面类型	nvue
Vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

测试过的手机：

小米10 pro MIUI 12.5.10
7plus 14.4.1

操作步骤：

此代码是hello swiper-page组件里面的源码，经测试安卓机无效

<list ref="list" class="list" :offset-accuracy="5" :bounce="true" fixFreezing="true" :headerHeight='50'>  
    <cell v-for="(item, index) in dataList" :key="item.id" :ref="'item'+index">  
        <view class="list-item">  
            <text>{{item.name}}</text>  
        </view>  
    </cell>  
    <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">  
        <text class="indicator-text">Loading ...</text>  
        <loading-indicator class="indicator"></loading-indicator>  
    </loading>  
</list>

预期结果：

list 或者waterfall 组件滚动到页面底部时安卓机如苹果机一样触发 loading子组件的 loading事件

实际结果：

list 或者waterfall 组件滚动到页面底部时安卓不会触发 loading子组件的 loading事件

bug描述：

list 或者waterfall 组件滚动到页面底部时安卓机不会触发 loading子组件 loading 的事件。苹果机正常。

zlyuanteng 1楼•8 天前

在 uni-app 中使用 nvue 开发时，list 组件和 waterfall 组件的子组件 loading 在 iOS 下有效果，但在安卓机上无效，可能是由于以下几个原因导致的：

1. 平台差异

nvue 是基于 Weex 的渲染引擎，而 Weex 在不同平台（iOS 和 Android）上的实现可能存在差异。某些特性或组件在 iOS 上支持得更好，而在 Android 上可能存在问题。

2. 组件兼容性

loading 组件在 nvue 中的实现可能对 Android 平台的支持不够完善。你可以尝试使用其他方式来实现加载效果，比如使用 text 或 image 组件自定义加载动画。

3. 样式问题

检查 loading 组件的样式是否在 Android 上被正确应用。nvue 的样式支持与 vue 有所不同，某些样式属性在 Android 上可能不生效。

4. 事件监听

确保 loading 组件的事件监听在 Android 上被正确触发。你可以通过调试工具查看事件是否被正确触发。

5. 版本问题

确保你使用的 uni-app 和 nvue 版本是最新的，某些问题可能在新版本中已经修复。

解决方案

1. 自定义加载组件

如果 loading 组件在 Android 上无效，可以尝试自定义一个加载组件，使用 text 或 image 组件来实现加载效果。

<template>
  <view class="loading-container" v-if="isLoading">
    <image class="loading-icon" src="/static/loading.gif"></image>
    <text class="loading-text">加载中...</text>
  </view>
</template>

<script>
export default {
  props: {
    isLoading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.loading-icon {
  width: 30px;
  height: 30px;
}
.loading-text {
  font-size: 14px;
  color: #999;
}
</style>

2. 使用 `uni.showLoading`

如果 loading 组件在 Android 上无效，可以尝试使用 uni.showLoading API 来显示加载提示。

uni.showLoading({
  title: '加载中...',
  mask: true
});

// 加载完成后
uni.hideLoading();

3. 检查平台代码

你可以通过判断平台来分别处理 iOS 和 Android 的加载逻辑。

if (uni.getSystemInfoSync().platform === 'ios') {
  // iOS 逻辑
} else {
  // Android 逻辑
}