微信小程序踩坑记 - scroll-view 上拉加载与 page 的下拉刷新冲突

9,366 阅读2分钟
原文链接: www.acfunc.com

我们都知道下拉刷新和上拉加载更多在移动端是非常常用的一个功能,做过原生app或是react-native的同学都知道,列表的刷新/加载都是通过ListView/UITableview来实现的,而在小程序也有相应的组件

上拉加载

根据文档,我们可以找到scroll-view组件

上拉加载主要有通过属性lower-thresholdbindscrolltolower 来实现,这两个属性,我们可以控制在距离底部lower-threshold位置处,执行我们的bindscrolltolower回调函数,从而实现上拉加载的效果

// wxml
<scroll-view scroll-y="true" class="drug-scroll" scroll-top="{{scrollTop}}" bindscrolltolower="{{loadMore.hasMore ? 'bindLoadMore' : ''}}" lower-threshold="10">
         <template is="drugItem" data="{{...drugItemData}}"/>
         <view class="loading-more" data-show="{{loadMore.loading}}">加载中...</view>
    </scroll-view>
// js
bindLoadMore: function() {

    this._fetchDatas()
  },

上面代码是我项目中的一个小片段,表示在如果还有更多的数据,在距离底部还有10rpx的时候,执行bindLoadMore 方法去获取远程数据

实现起来很简单,通过测试也能达到上拉加载更多的效果

下拉刷新

你会发现,在scroll-view 中 并没有相关下拉的属性或是回调方法来实现下拉刷新的效果

仔细看文档,最后发现

小程序是通过在.json文件注册实现下拉刷新,比较非主流,但是相对也更简单

{
    "enablePullDownRefresh": true
}

通过运行,我们看到并没有下拉刷新的效果,难道打开方式不对吗?

最后发现是page的下拉刷新和scroll-view 的滚动效果冲突了,不能触发到page的下拉效果,这可如何是好?

还是看文档,最后发现在page的回调方法里面有一个onReachBottom

看来,如果需要同时又下拉和上拉效果只能用page相关回调,如果只是上拉加载,可以用scroll-view 或是 page

擦干眼泪,撸着袖子继续干,最后代码

//wxml

<view class="order-scroll" data-refresh="{{refreshText}}">
    <block wx:key="{{index}}" wx:for="{{orders}}">
      <template is="orderItem" data="{{...item}}"/>
    </block>
    <view class="loading-more" data-show="{{loadMore.loading}}">加载中...</view>
  </view>
// js

onPullDownRefresh: function () {

    this.data.loadMore.page = 1;
    this._fetchOrders(true);
  },

  onReachBottom: function () {
    if (this.data.loadMore.hasMore) {
      this.data.loadMore.loading = true;
      this.setData({
        loadMore: this.data.loadMore,
      });
      setTimeout(() => {
        this._fetchOrders()
      }, 500);
    }
  },

上拉加载具体用scroll-view 还是用 page,需要根据具体的业务需求考虑

如果你有更好的方法,请告诉我