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

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

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

• onPullDownRefresh: 下拉刷新

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

• onReachBottom: 上拉触底

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

index.json：

{

"navigationBarTitleText" : "交易记录",

"enablePullDownRefresh" : true

}

index.wxml：

< view class= "container">

测试下拉刷新、上拉加载更多

</ view >

< view class= "weui-loadmore" hidden= "{{isHideLoadMore}}">

< view class= "weui-loading"></ view >

< view class= "weui-loadmore-tips">正在加载 </ view >

</ view >

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

// 下拉刷新

onPullDownRefresh: function () {

console.log( "下拉刷新");

// 页面相关事件处理函数--监听用户下拉动作

wx.showNavigationBarLoading() //在标题栏中显示加载

//模拟加载

setTimeout( function () {

// complete

wx.hideNavigationBarLoading() //完成停止加载

wx.stopPullDownRefresh() //停止下拉刷新

}, 1500);

},

//加载更多

onReachBottom: function () {

console.log( '加载更多');

},

执行效果显示：可以执行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，因为可随意定义位置、宽高。