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

---

前言

小程序下拉刷新，上拉加载更多想知道吗？ 往下看

---

一、小程序下拉刷新？

就是将相应的数组清空 在onPullDownRefresh（）
方法中调用 使用this.setData()渲染data数组里面的定义好的渲染页面的数组shopList

onPullDownRefresh() {
    this.setData({
      // 数据清空
      shopList: []
    })
    // 重新调用数据
    this.shopList()

  }

二、上拉加载更多

上拉加载的过程
1.在data中定义要渲染页面的数组

data: {
    data: [{
      name: '综合'
    }, {
      name: '销量'
    }, {
      name: '价格'
    }],
    shopList: [],
    currentIndex: [],
    status: 0,
  },

2.获取数据渲染页面 并设置上滑需要的参数

  // 保存上滑参数
  QueryParmas: {
    query: '',
    cid: '',
    pagenum: 1,
    pagesize: 10
  },
  // 总页数
  totalPages: 1,

在下面的地方调用

onLoad: function (options) {
    this.shopList()
    this.QueryParmas.cid = options.cid
    // console.log(this.QueryParmas.cid);
  },

shopList() {
    let that = this;
    wx.showLoading({
      title: '加载中。。。',
    })
    app.http.shopList({
      cid: that.options.cid
    }, 'get').then(res => {
      wx.hideLoading()
      let {
        data: {
          message: {
            goods
          }
        }
      } = res
      //定义res 数组 里面的数据是consloe.log(res)下的data下的message下的goods
      that.setData({
        // 用展开运算符 保存数据shopList
        shopList: [...goods, ...that.data.shopList]
      })
      // 每页的条数
      that.totalPages = Math.ceil(res.data.message.total / that.QueryParmas.pagesize)
      // console.log(this.data.shopList);
      // 关闭下拉
      wx.stopPullDownRefresh()
    })
  },

在上滑的方法中执行

  onReachBottom: function () {
    console.log(this.totalPages, this.QueryParmas.pagenum);
    // 当前总条数   和   当前每页的条数
    if (this.totalPages == this.QueryParmas.pagenum) {
      wx.showToast({
        title: '没有更多数据',
      })
      //弹出提示框
    } else {
      // 页数增加
      this.QueryParmas.pagenum++
      this.shopList()
      //调用this.shopList来渲染页面
    }
  },