小程序的下拉刷新 上拉加载更多

下拉刷新:就是将数据清空 重新请求数据 配合onPullDownRefresh
上拉加载更多 重新请求数据 添加到list  配合onReachBottom

首先 json 页面要配置 "enablePullDownRefresh":true ,"backgroundTextStyle":"dark"

下拉刷新
wx.showNavigationBarLoading();
this.setData({
然后初始searchParam
isShowloading: true, //下拉刷新显示了loading
isEmpty:false, //表示数据暂时没有请求完
list:[]
},()=>{this.getList()})

获取数据的时候 判断list.length,选择整合数据还是赋值
isEmpty:res.data.data.length<this.data.searchParam.per_page?true:false
请求完成后的回调里判断是否是下拉刷新
 if (this.data.isShowloading) {
          wx.hideNavigationBarLoading() //完成停止加载
          wx.stopPullDownRefresh() //停止下拉刷新
          this.setData({
            isShowloading: false
          })
        }

上拉加载更多
if(!this.data.isEmpty){
      this.setData({
        searchParam: { ...this.data.searchParam,
          current_page:this.data.searchParam.current_page+1
        }
      }, () => this.getList())
    }

页面中有个 用于加载完数据后的显示
<view class="empty-tip" wx:if="{{isEmpty}}">
  <text>没有更多了~</text>
       </view>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容