小程序的下拉刷新跟点进去刷新上拉加载

Posted 2021-07-08 fengshaopu

进去刷新：
第一步，在json中：

    "backgroundTextStyle": "dark",
  "enablePullDownRefresh": true

第二步在，请求接口前面时：写

 wx.showLoading({
      title: '刷新中...',
    })

请求结束以后：

    wx.hideLoading();
```gh() {
    wx.request({
      url: `https://api-hmugo-web.itheima.net/api/public/v1/goods/search?cid=${this.data.kkk}&pagenum=${this.data.pagenum}&pagesize=${this.data.pagesize}&query=${this.data.query}`,
      data: {},
      success: ((res) => {
        wx.hideLoading();

        console.log(res);
        var a = res.data.message.goods
        var b = Math.ceil(res.data.message.total / this.data.pagenum)
        console.log(b);
        this.setData({
          list: [...a,...this.data.list],
          t: b
        })
      })

    })
    //   // 3. 停止下拉刷新，在需要刷新结束时调用该api，否则，页面将会保持下拉状态、不会回弹。

  },
上拉加载：

```css

**把接口跟加载结束**封装到一块



     this.setData({
          list: [...a,...this.data.list], //获取当前加载跟之前加载的数据
          t: b
        })

        var b = Math.ceil(res.data.message.total / this.data.pagenum)
         总页数除以当前页数得到能分几页向上取整


 onReachBottom: function () {  //上拉到底部是触发
    console.log(this.data.t,this.data.pagenum);
    if (this.data.t<this.data.pagenum) {  //判断刷新到当前页时没有更多
      wx.showLoading({
        title: '没有更多数据了',
      })
      return false
    } else {
      wx.showLoading({
        title: '刷新中...',
      })
      this.data.pagenum++         //页数++ 调用分装的接口
      this.gh()
      console.log(this.data.list);
    }



  },

最后下啦刷新的时候：
回到第一页就好 并且下啦加载动画清除

在这里插入代码片 this.setData({
      list: []
    })
    wx.showLoading({
      title: '加载',
    })
    this.data.pagenum = 1
    this.gh()
    wx.stopPullDownRefresh();