微信小程序的上拉加载，下拉刷新

微信小程序的上拉加载和下拉刷新有点不一样

我们先在所需要进行上拉加载和下拉刷新的页面进行开启这项操作的步骤一

“enablePullDownRefresh"：true

当我们进行开启后，我们先进行下拉刷新

 

const app=getApp()​
Page({
    /**
     * 页面的初始数据
     */
    data: {
        llll:{},
    },
 onLoad: function (e) {
        this.data.llll=e  
    },

​
/**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        let ii=this.data.llll
        console.log(ii);

        //再次渲染页面

        app.http.search(ii).then(res=>{
          console.log(res);
          this.setData({
              search:res.data.message.goods
          })
      })
  
    },
})

我们将所需要刷新的数据放在 onPullDownRefresh 中便可进行下拉刷新

上拉加载也是如此，我们上拉加载也是有专用的上拉加载生命周期函数

const app=getApp()
 Page({

    /**
     * 页面的初始数据
     */
    data: {
        total:0
    },
can{
      pagesize:8,
      pagenum:1
    },

totalll:1,

    onLoad: function (e) {
        console.log(e);
        this.can.cid=e.cid_id||''
        this.can.query=''

        this.data.llll=e

        app.http.search({
          cid:e.cid_id
        }).then(res=>{
          this.setData({
            total:res.data.message.total
          })

          //将数据进行分割

          this.totalll=Math.ceil(this.data.total/this.can.pagesize)
          console.log(this.totalll);
      })
    },

 onReachBottom: function () {
      var that=this
      console.log(1);

      //展示的数据的多少进行判断

      if(that.can.pagenum<that.totalll){
        that.can.pagenum++
        console.log(that.can.pagenum);
        app.http.search(that.can).then(res=>{
          console.log(res);
          that.setData({
              search:[...that.data.search,...res.data.message.goods]
          })
      })
      }else{
        wx.showToast({
          title: '没有下一页数据',
        })
      }
      
    },
})

这样就完成了上拉加载，另外请求方式是我们自己promise封装的wx.request

如何promise封装的wx.request和使用，在第一篇博客中