【微信小程序】下拉刷新功能实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了【微信小程序】下拉刷新功能实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序开发系列

前言

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

一、onPullDownRefresh函数

监听用户下拉刷新事件。

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

 "enablePullDownRefresh": true

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

二、实现

1.开启下拉刷新

{
  "navigationBarTitleText": "订单详情",
  "enablePullDownRefresh": true,//开启下拉刷新
  "backgroundTextStyle": "dark",
  "usingComponents": {
  }
}

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);
  },