一、启用下拉刷新（两种方式）

1、全局下拉刷新

在app.json的window节点中，将enablePullDownRefresh设置为true

2、局部下拉刷新

在页面的json文件中，将enablePullDownRefresh设置为true

二、配置下拉刷新

在全局或页面的.json文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式，其中：

backgroundColor：用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值

backgroundTextStyle：用来配置下拉刷新loading的样式，仅支持dark和light两个颜色属性

如图在页面的json文件进行的配置：

三、下拉刷新

1、在data中定义存放列表的属性，用来接收获取的数据

data: {
    list:[], // 列表数组
    pageNum: 1,// 页码值
    pageSize: 10, // 每页显示多少条数据
    // 总数量，用来实现分页
    total: 0
  },

2、将页面跳转时携带的参数，转存到分页中：

  /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  // 调用获取商品列表数据的方法
 this.getList()
 },

3、 定义获取商品列表数据

//获取商品列表数据方法
getList(isPull) {
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: `******`,
      method:'GET',
      success:({data:res})=>{
        console.log(res);
        // 只要数据请求完毕，就立即按需调用 isPull回调函数
         
      // 无论获取数据是否成功都会执行该方法
      complete:()=>{
        wx.hideLoading() // 关闭loading
      }
    })
  },

3、在页面循环数据，展示到页面（此处代码省略）

4、下拉刷新事件

      /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 1. 重置关键数据
    
      this.pagenum:1,
      total :0,
      isloading : false,
      List : []
    })
    // 2. 重新发起请求 并关闭下拉窗口
    this.getList(() => wx.stopPullDownRefresh())
  },

四、上拉触底事件

1、首先需要配置json文件，“onReachBottomDistance”: 150

2、在onReachBottom上拉触底事件中处理

    /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  if(this.data.isLoading) return  //判断是否为true 
  this.pageNum:pageNum += 1// 让页码值自增 +1
  this.getList()// 重新获取列表数据
  },

3、通过节流阀防止发起额外的请求

3.1在 data 中添加 isloading 节流阀如下：

  data: {
    // 是否正在请求数据
    isloading: false
  }

3.2修改 getGoodsList 方法，在请求数据前后，分别打开和关闭节流阀：

// ** 打开节流阀
getList() {
  this.setData({
      isLoading:true
    })
   // 省略中间代码，和前面一致
  wx.request({
   //...省略代码，和前面 3、定义获取商品列表数据 代码不变
  // 无论获取数据是否成功都会执行该方法
      complete:()=>{
        wx.hideLoading() // 关闭loading
        this.isLoading:false
      }
  })
}

3.3 判断数据是否加载完毕，避免不必要的请求

如果下面的公式成立，则证明没有下一页数据了：

当前的页码值 * 每页显示多少条数据 >= 总数条数

pagenum * pagesize >= total

onReachBottom: function () {
// 判断是否还有下一页数据
  if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) {
  wx.showLoading({
      title: '数据加载完毕！',
    })
    wx.hideLoading() // 关闭loading
    return 
   }
  }

上拉触底完整代码如下

data: {
    List:[], // 商品列表数组
    query: '',   // 查询关键词
    cid: '',   // 商品分类Id
    pagenum: 1,// 页码值
    pagesize: 10 // 每页显示多少条数据
    // 总数量，用来实现分页
    total: 0,
    // 是否正在请求数据
    isloading: false
},
//获取商品列表数据方法
getGoodsList() {
    this.setData({
      isLoading:true
    })
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: `******`,
      method:'GET',
      success:({data:res})=>{
        console.log(res);
        this.setData({
          List:[...this.data.goodsList, ...res.data],
          total:res.tolal
        })
      },
      // 无论获取数据是否成功都会执行该方法
      complete:()=>{
        wx.hideLoading() // 关闭loading
        this.setData({
          isLoading:false
        })
      }
    })
  },
   /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  // 判断是否还有下一页数据
  if (this.pagenum * this.pagesize >= this.total) {
  wx.showLoading({
      title: '数据加载完毕！',
    })
    wx.hideLoading() // 关闭loading
    return 
   }
  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  if(this.data.isLoading) return 
  let pagenum = 'this.pagenum'
    this.pageNum += 1// 让页码值自增 +1
    this.getList()// 重新获取列表数据
  },