微信小程序onPullDownRefresh onReachBottom实现下拉刷新上拉分页加载

样式基于weui

首先需要配置页面的json文件，启用下拉刷新

{
  "enablePullDownRefresh": true
}

在WXML里，通过列表渲染即可显示数据

<view class="weui-panel__bd">
    <view wx:for="{{list}}" wx:key="item" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
      <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
        <image class="weui-media-box__thumb" src="{{item.coverpic ? item.coverpic : '/src/img/coverpic.png'}}" />
      </view>
      <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
        <view class="weui-media-box__title">{{item.title}}
        <block wx:if="{{item.groupid==2}}">
          <view class="weui-badge" style="margin-left: 5px;" wx:if="{{item.ishidden==1}}">隐藏</view>
          <view class="weui-badge" style="margin-left: 5px;" wx:if="{{item.status==0}}">待审核</view>
          <view class="weui-badge" style="margin-left: 5px;" wx:if="{{item.status==2}}">请修改</view>
          </block>
        </view>
        <view class="weui-flex">
        <block wx:if="{{item.groupid==2}}">
            <navigator class="placeholder">
              详情
            </navigator>
            <navigator class="placeholder" url="/pages/my/activity/add/add?activity_id={{item.activity_id}}">
              编辑
            </navigator>
            <navigator class="placeholder" url="/pages/my/activity/form/form?activity_id={{item.activity_id}}">
              报名信息
            </navigator>
            <navigator class="placeholder">
              项目
            </navigator>
            <navigator class="placeholder">
              赛程
            </navigator>
            </block>
            <navigator class="placeholder">
              签到
            </navigator>
        </view>
      </view>
    </view>
    <view class="weui-loadmore weui-loadmore_line" hidden='{{hasmoreData}}'>
      <view class="weui-loadmore__tips weui-loadmore__tips_in-line">暂无更多数据</view>
    </view>
    <view class="weui-loadmore" hidden='{{hiddenloading}}'>
      <view class="weui-loading"></view>
      <view class="weui-loadmore__tips">正在加载</view>
    </view>
  </view>

JS部分我是将post再封装了一次，这边主要用到onPullDownRefresh和onReachBottom两个方法

var app = getApp()
Page({
  data: {
    num:10,
    count:-1,
    page: 0,
    list: [],
    hasmoreData: true,
    hiddenloading: true,
  },
  onLoad: function (options) {
    this.getList()
  },
  onPullDownRefresh: function () {
    this.setData({num:10,count:-1,page:0,list:[],hasmoreData:true,hiddenloading:true})
    this.getList();
    console.log('刷新数据')
    wx.stopPullDownRefresh()
  },
  onReachBottom: function () {
    console.log('加载更多')
    this.setData({ hiddenloading:false})
    this.getList()
  },
  getList: function () {
    var that = this
    if (that.data.count!=-1&&that.data.page * that.data.num >= that.data.count) {
      that.setData({ hasmoreData: false, hiddenloading:true })
      return
    }
    app.post('链接',{page:that.data.page},function(res){//这边是我自己的封装的post方法，具体大家再看
      if (res.count == 0) that.setData({ count: res.data.count,hasmoreData: false })
      for(var i=0;i<res.data.list.length;i++){
        that.data.list.push(res.data.list[i])
      }
      that.setData({ count: res.data.count, num: res.data.num,page:that.data.page+1,list:that.data.list,hiddenloading:true})
      if (!res.data.hasmoreData) that.setData({ hiddenloading: true })
    })
  },
})

完整说明：

1. 将请求接口封装为一个方法
2. 通过监听onPullDownRefresh，先对data中的数据进行初始化，然后请求接口
3. 通过监听onReachBottom，实现加载分页数据