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

微信小程序开发系列


文章目录


前言

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


一、onPullDownRefresh函数

监听用户下拉刷新事件。

  • 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh:
javascript 复制代码
 "enablePullDownRefresh": true
  • 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
  • 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

二、实现

1.开启下拉刷新

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

2.监听下拉事件

javascript 复制代码
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  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);
  },

相关推荐
HerayChen1 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘5 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡7 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼11 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857513 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027713 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__20 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN2 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节