【微信小程序】下拉刷新功能实现_微信小程序下拉刷新

微信小程序开发系列

---

---

前言

在开发微信小程序中经常会需要下拉页面进行更新要页面数据的功能，微信小程序提供了onPullDownRefresh函数。该函数作用是监听用户下拉动作。

---

一、onPullDownRefresh函数

监听用户下拉刷新事件。

• 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh：

 "enablePullDownRefresh": true
1

• 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
• 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

二、实现

1.开启下拉刷新

{
  "navigationBarTitleText": "订单详情",
  "enablePullDownRefresh": true,//开启下拉刷新
  "backgroundTextStyle": "dark",
  "usingComponents": {
  }
}
1
2
3
4
5
6
7

2.监听下拉事件

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    wx.showLoading({
      title: '刷新中...',
    })//加载中
    this.getOrderDetail(this);//业务处理
   
  },
  
  getOrderDetail: function (e) {
    var that = e;
   var id= that.data.id;
    var params = {
      url: "/getOrderDetail",
      method: "POST",
      data: {
        "id":this.data.id
      },
      callBack: function (res) {
      	//设置数据
        wx.hideLoading();
        wx.stopPullDownRefresh();//停止下拉刷新效果
      }
    };
    http.request(params);
  },
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

---