微信小程序实现下拉刷新

Posted 2023-03-25

参考技术A 除了在js页面编写响应的逻辑之外，还需要再相应页面的json中写入以下配置，这个配置允许这个页面进行下拉刷新动作

特别需要注意的是：

此外，除了下拉刷新，有时候可能是在某个事件进行时触发刷新动作，此时可以调用wx.startPullDownRefresh(Object object) 此api的作用是：“ 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

转自： https://www.cnblogs.com/xunxian/p/12862660.html

微信小程序下拉刷新和上拉加载的实现

一： 下拉刷新

下拉刷新两个步骤就能实现。

1.在要实现下拉刷新的页面的json配置文件里面加上

"enablePullDownRefresh": true, //开启下拉刷新

"backgroundColor": "#f0145a" //设置背景颜色，如果不设置背景颜色，就看不见下拉刷新的加载动画了，因为加载动画和背景色颜色一样

2.在要实现下拉刷新的页面下拉刷新的函数

onPullDownRefresh() {

wx.showNavigationBarLoading() //在标题栏中显示加载

},

二. 上拉加载更多

1. // 帖子滚动到底部的加载事件  
2. lower:function(e){  
3.   console.log(e)  
4.   var that = this  
5.   var url = util.apiUrl + ‘FWinfo/tiezi_list‘  
6.   util.request(url, ‘get‘, { ‘program_id‘: app.program_id, ‘id‘: that.data.msg_id }, ‘正在加载数据‘, function (res) {  
7.     for (var i = 0; i < res.data.length; i++) {  
8.       res.data[i].image = res.data[i].image.split(",")  
9.     }  
10.     var msg = that.data.msg.concat(res.data)  
11.     that.setData({  
12.       msg: msg,  
13.       msg_id: res.data[res.data.length - 1].id  
14.     })  
15.   })  
16. },