微信小程序下拉刷新

最新推荐文章于 2025-05-21 03:31:41 发布

有个派大星

最新推荐文章于 2025-05-21 03:31:41 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/oschina_41661541/article/details/81865938

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

xml写法
<view class="weui-loadmore" hidden="{{!searchLoading}}">
  <view class="weui-loading"></view>
  <view class="weui-loadmore__tips">正在加载</view>
</view>
<view class="weui-loadmore weui-loadmore_line" hidden="{{!searchLoadingComplete}}">
  <view class="weui-loadmore__tips weui-loadmore__tips_in-line">已加载全部</view>
</view>

接下来就是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 {}
  },
})

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