微信小程序实战:上拉加载和下拉刷新

简介:小程序上拉加载和下拉刷新应该是项目中经常用到的功能。下面的onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新

首先了解下两个官方API 上拉加载onReachBottom 和 下拉刷新onPullDownRefresh

一、在你的当前json文件里设置window属性

  "enablePullDownRefresh": true,

二、代码示范 (注释的很清楚)

上拉加载 onReachBottom

   //页面上拉加载
onReachBottom() {
	//判断是否开启上拉加载 data中的pageNum和pageSize total是接口返回的
   if (this.data.pageNum * this.data.pageSize >= this.data.total) {
     return;
   }
   this.setData({
     pageNum: this.data.pageNum += 1
   })
     const list = this.data.List;
     this.getNewlist().then(res => {
       this.setData({
       //利用es6 concat拼接
         List: list.concat(res.data)
       })
     })
   }
 },

下拉刷新 onPullDownRefresh

onPullDownRefresh() {
    wx.showNavigationBarLoading();  //动画
    wx.showLoading({
      title: '正在刷新',
    })
    this.setData({
      pageNum: 1
    })
    //列表请求
    this.getNewlist().then(res => {
      if (res) {
        this.setData({
          List: res.data
        })
        wx.hideNavigationBarLoading(); 
        wx.stopPullDownRefresh(); //赋值后停止当前页面下拉刷新
      }
    })
  }

怎么样? 是不是很简单,在我看来核心在于你的计算和数组的拼接

上一篇:Spring boot集成spring session实现session共享


下一篇:小程序下拉刷新 上拉加载等多