微信开发之下拉刷新上拉加载更多

微信小程序实现“下拉刷新、上拉加载更多”功能，有两种实现方式：

方式1：利用页面的onPullDownRefresh和onReachBottom实现：

• onPullDownRefresh: 下拉刷新

  • 监听用户下拉刷新事件。
  • 需要在app.json的选项中或中开启enablePullDownRefresh。
  • 当处理完数据刷新后，可以停止当前页面的下拉刷新。

• onReachBottom: 上拉触底

  • 监听用户上拉触底事件。
  • 可以在app.json的选项中或中设置触发距离onReachBottomDistance。
  • 在触发距离内滑动期间，本事件只会被触发一次。

index.json：

index.wxml：

index.js 重写系统回调函数onPullDownRefresh和onReachBottom：

执行效果显示：可以执行onPullDownRefresh，但始终无法执行onReachBottom。经过一番折腾，最后发现：

如果页面的内容未满一屏，上拉的时候就无法触发onReachBottom。

那么有没有其他替代方案呢？答案就是使用scrollview。

方式2:利用scrollview的属性bindscrolltoupper 和 bindscrolltolower 实现。

wxml示例代码：

<scroll-view bindscroll="scroll" 
       bindscrolltolower="lower" 
       bindscrolltoupper="upper" 
       bindtouchstart="start" 
       bindtouchend="end" > 

    <view style="width:100%;height:100%" bindtouchmove="move">
        <block wx:for="{{words}}">  
                <view class="item-style">{{item}}</view>  
        </block>  
    </view>

</scroll-view>

然后，在js文件编写函数，处理相应事件即可。

总结：

1、如果单纯实现“下拉刷新”，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

2、使用页面的enablePullDownRefresh属性，不能对页面内某一区域/控件实现“下拉刷新、上拉加载更多”功能。

3、若要实现“下拉刷新、加载更多”，建议使用scrollview，因为可随意定义位置、宽高。