微信小程序实现下拉刷新和上拉触底，获取新数据_微信小程序下拉刷新功能

一、启用下拉刷新（两种方式）
1、全局下拉刷新
在app.json的window节点中，将enablePullDownRefresh设置为true
2、局部下拉刷新
在页面的json文件中，将enablePullDownRefresh设置为true
二、配置下拉刷新
在全局或页面的.json文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式，其中：
backgroundColor：用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
backgroundTextStyle：用来配置下拉刷新loading的样式，仅支持dark和light两个颜色属性
如图在页面的json文件进行的配置：

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

data: {
    goodsList:[], // 商品列表数组
    // 请求参数对象
    queryObj:{
      pagenum: 1,// 页码值
      pagesize: 10 // 每页显示多少条数据
    },
    // 总数量，用来实现分页
    total: 0
  },
1
2
3
4
5
6
7
8
9
10

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

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

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

//获取商品列表数据方法
getGoodsList(isPull) {
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: `https://www.dd.cn/${this.data.queryObj}`,
      method:'GET',
      success:({data:res})=>{
        console.log(res);
        // 只要数据请求完毕，就立即按需调用 isPull回调函数
  		isPull && isPull()
        this.setData({
          goodsList:[...this.data.goodsList, ...res.data],
          total:res.tolal
        })
      },
      // 无论获取数据是否成功都会执行该方法
      complete:()=>{
        wx.hideLoading() // 关闭loading
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3、在页面循环数据，展示到页面（此处代码省略）
4、下拉刷新事件

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 1. 重置关键数据
    let pagenum = 'queryObj.pagenum'
    this.setData({
      [pagenum]:1,
      total :0,
      isloading : false,
      goodsList : []
    })

    // 2. 重新发起请求 并关闭下拉窗口
    this.getGoodsList(() => wx.stopPullDownRefresh())
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

四、上拉触底事件
1、首先需要配置json文件，“onReachBottomDistance”: 150
2、在onReachBottom上拉触底事件中处理

 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  	if(this.data.isLoading) return  //判断是否为true 
  	
  	let pagenum = 'queryObj.pagenum'
    this.setData({
      pagenum:pagenum += 1// 让页码值自增 +1
    })
    this.getGoodsList()// 重新获取列表数据
  },
1
2
3
4
5
6
7
8
9
10
11
12

3、通过节流阀防止发起额外的请求
3.1在 data 中添加 isloading 节流阀如下：

  data: {
// 是否正在请求数据
    isloading: false
}
1
2
3
4

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

// ** 打开节流阀
getGoodsList() {
  this.setData({
      isLoading:true
    })
   // 省略中间代码，和前面一致
  wx.request({
   //...省略代码，和前面 3、定义获取商品列表数据 代码不变
  	// 无论获取数据是否成功都会执行该方法
      complete:()=>{
        wx.hideLoading() // 关闭loading
        this.setData({
          isLoading:false
        })
      }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.3 判断数据是否加载完毕，避免不必要的请求
如果下面的公式成立，则证明没有下一页数据了：

当前的页码值 * 每页显示多少条数据 >= 总数条数
pagenum * pagesize >= total
1
2

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

上拉触底完整代码如下

data: {
    goodsList:[], // 商品列表数组
    // 请求参数对象
    queryObj:{
      query: '',   // 查询关键词
      cid: '',   // 商品分类Id
      pagenum: 1,// 页码值
      pagesize: 10 // 每页显示多少条数据
    },
    // 总数量，用来实现分页
    total: 0,
    // 是否正在请求数据
    isloading: false
},
//获取商品列表数据方法
getGoodsList() {
	this.setData({
      isLoading:true
    })
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: `https://www.dd.cn/${this.data.queryObj}`,
      method:'GET',
      success:({data:res})=>{
        console.log(res);
        this.setData({
          goodsList:[...this.data.goodsList, ...res.data],
          total:res.tolal
        })
      },
      // 无论获取数据是否成功都会执行该方法
      complete:()=>{
        wx.hideLoading() // 关闭loading
        this.setData({
          isLoading:false
        })
      }
    })
  },
   /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  // 判断是否还有下一页数据
  if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) {
  wx.showLoading({
      title: '数据加载完毕！',
    })
    wx.hideLoading() // 关闭loading
    return 
   }
  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  	if(this.data.isLoading) return 
  	
  	let pagenum = 'queryObj.pagenum'
    this.setData({
      [pagenum]:pagenum += 1// 让页码值自增 +1
    })
    this.getGoodsList()// 重新获取列表数据
  },
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63