9

https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API

微信小程序之下拉加载和上拉刷新
微信小程序下拉加载和上拉刷新两种实现方法
方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新

首先要在json文件里设置window属性

属性 类型 描述
enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数。

设置js里onPullDownRefresh和onReachBottom方法

属性 类型           描述
onPullDownRefresh function 页面相关事件处理函数——监听用户下拉动作
onReachBottom function 页面上拉触发底事件的处理函数
// 全局开启下拉刷新在最外层的main.js下

 window: {
  enablePullDownRefresh: true,
}

// 局部开启下拉刷新,就在文件下的main.js

export default {
  config: {
    "enablePullDownRefresh": true,
  }
}

// 下拉刷新方法,与methods方法同级

async onPullDownRefresh() {
  // to doing..
  // 停止下拉刷新
  wx.stopPullDownRefresh();
},

// 上拉加载,拉到底部触发
onReachBottom() {
  // 到这底部在这里需要做什么事情
  this.loadMore();
},

我的GitHub博客,很多内容可以看,喜欢的给星星哦 https://github.com/liangfengbo/frontend


梁凤波
434 声望22 粉丝