uniapp上拉加载更多支付宝不刷新怎么回事

1. 问题背景

用户在使用uniapp时，发现在支付宝小程序中上拉加载更多时界面没有自动刷新，需要手动下拉才能看到新数据，这给用户带来了不便和困扰。那么，这个问题是如何产生的呢？如何解决呢？本文将带您一一解析。

2. 问题原因

在支付宝小程序中，当我们使用onReachBottom函数进行上拉加载更多时，由于支付宝小程序的页面渲染机制是虚拟滚动，即只在当前显示区域内渲染，其他的数据并没有渲染，因此需要手动触发下拉才能看到新数据。

3. 解决方法

为了解决这个问题，我们需要在onReachBottom函数中加入相应的代码，在页面渲染时自动刷新数据。具体的方法如下：

3.1 解决思路

我们可以通过在onReachBottom函数中调用uni.showNavigationBarLoading()函数，显示导航栏加载动画，同时将加载提示信息置于页面的底部，使得用户在翻页时可以实时看到加载提示信息。等数据加载完成后，再调用uni.hideNavigationBarLoading()函数，隐藏导航栏加载动画，同时通过调用uni.pageScrollTo()函数，将页面滑动至原来的位置，即刷新页面，让用户看到新的数据并保证界面的一致性。

3.2 具体操作

在uniapp中，我们用$refs来访问组件，因此需要在template中为页面的外层DIV添加ref='scroll-view'属性，然后在onReachBottom函数中调用该DIV的自定义事件trigger，即可触发自动刷新数据。具体的代码实现如下：

methods: {
  onReachBottom() {
    uni.showNavigationBarLoading(); // 显示导航栏加载动画
    this.$refs['scroll-view'].$emit('scroll-bottom'); // 触发自定义事件
  },
  finishLoad() {
    uni.hideNavigationBarLoading(); // 隐藏导航栏加载动画
    uni.pageScrollTo({
      scrollTop: this.scrollTop - 1 // 刷新页面
    })
  }
}

在template中，我们需要添加一个loadmore组件，该组件包含两个参数：noremore（是否有更多数据），loadmore（加载更多时触发的函数），如下所示：

在javascript文件中，我们需要编写loadMore函数，该函数将数据请求回来，通过computed计算属性判断页面是否已经加载完所有数据，只有在还有数据需要加载时才会调用finishLoad函数，即完成刷新页面的操作，如下所示：

computed: {
  hasMore() { // 是否还有更多数据
    return this.totalCount > this.pageIndex * this.pageSize;
  }
},
methods: {
  loadMore() { // 请求数据
    uni.request({
      url: 'http://xxx/api/more?pageIndex=' + this.pageIndex + '&pageSize=' + this.pageSize,
      success(res) {
        this.dataList = this.dataList.concat(res.data.list); // 将数据添加至已有数据列表中
        this.pageIndex++; // 索引+1，准备下次加载
        if (this.hasMore) { // 如果还有更多数据，则刷新页面
          this.finishLoad();
        }
      }
    })
  },
  finishLoad() { // 刷新页面
    uni.hideNavigationBarLoading();
    uni.pageScrollTo({
      scrollTop: this.scrollTop - 1
    })
  }
}

至此，我们就成功解决了在uniapp中上拉加载更多支付宝不刷新的问题。

4. 总结

本文详细阐述了uniapp中上拉加载更多支付宝不刷新的问题，分析了问题的原因，并详细介绍了解决问题的方法，希望本文能够帮助到广大uniapp开发者。