微信小程序下拉刷新

微信小程序下拉刷新_第1张图片

微信小程序下拉刷新_第2张图片

关于小程序下拉刷新加载的,小程序官方API里面讲的其实很详细,基于官方的教程,我结合自己做的项目把这个功能实现,看看我的具体代码:

xml写法

接下来就是js里面的方法,官方API里面是这样说的https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#pageonpulldownrefresh

具体怎么实现,我是这样写的:

js:

var  pageNow = 1, hasMoreData = true;
page({
data:{
    pageNow: 1,
    pageSize: 10,
    searchLoading: false, //"上拉加载"的变量,默认false,隐藏
    searchLoadingComplete: false, //“没有数据”的变量,默认false,隐藏
}
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    pageNow = 1;  //当前页
    hasMoreData = true;
    this.data.searchLoading = true,
      this.data.searchLoadingComplete = true;
      
    call.request('event/work', {
      openid: wxuser.openId,
      pageNow: pageNow,
      pageSize: this.data.pageSize
    }, this.shuffleSuc, this.fail);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    if (hasMoreData) {
      pageNow++;
      call.request('event/work', {
        openid: wxuser.openId,
        pageNow: pageNow,
        pageSize: this.data.pageSize
      }, this.shuffleSuc, this.fail);
    } else {}
  },
})

以上就是我实现下拉加载刷新的实现

你可能感兴趣的:(微信小程序下拉刷新)