mpvue 小程序如何开启下拉刷新，上拉加载?

2024年4月23日 259次阅读 来源: 梁凤波

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

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

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

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

设置js里onPullDownRefresh和onReachBottom方法

属性类型 　　　　　　　　　描述
onPullDownRefreshfunction页面相关事件处理函数——监听用户下拉动作
onReachBottomfunction页面上拉触发底事件的处理函数
// 全局开启下拉刷新在最外层的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

    原文作者：梁凤波
    原文地址: https://segmentfault.com/a/1190000015027673
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞