微信小程序下拉刷新-我爱编程

当前位置：: 首页; 文章; 前端
详情

微信小程序下拉刷新

前端
三生万物
0

下拉刷新是常用操作，微信已经集成好了（真机效果稍有瑕疵）

首先需要在.json文件启用下拉刷新

{
    "enablePullDownRefresh": true,
}

然后在.js文件，监听下拉操作，处理loading和请求

onPullDownRefresh() {
    wx.showNavigationBarLoading();
    this.setData({
      page: 1 // 分页重置为第1页
    });
    this.getList();
}

最后在接口请求结束，停止下拉刷新，不然不会触发回弹

wx.request({
    url: 'https://www.xxx.com/api/list',
    header: {
        "Content-Type": "application/json"
    },
    data: {
        page: this.data.page
    },
    success() {
        // ...
    },
    fail() {
        // ...
    },
    complete() {
        wx.hideNavigationBarLoading(); 
        wx.stopPullDownRefresh();
    }
})

免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。