小程序实战(九):小程序实现下拉刷新
作者:勇康博客网 | 分类:小程序 | 浏览:1260 | 日期:2022年06月14日上一篇我们讲了配置【小程序实现上拉分页】,有兴趣的小伙伴可以移步至小程序实现上拉分页查看。这一节我们讲【小程序实现下拉刷新】。
下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页……
我这里还是用在首页,上拉分页,下拉刷新重载分页。我就是这么做的。
下拉刷新和上拉分页还是有区别的。
下拉刷新需要在index.json中添加属性:
"enablePullDownRefresh": true
Index.js
Page({ data: { // 文章数组 articleList:[], //每页显示的行数: pagesize: 20, //页码(从1开始) page:1,// 文章页码 //用于标识是否还有更多的状态 state: 1, //用于数组的追加和暂存 allProject: [], }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { var self = this; self.getArticleList(); }, /** * 获取文章列表 */ getArticleList() { var self = this; // 请求后台接口获取文章列表 wx.request({ // 请求连接 url: 'https://guanchao.site/index/xxxx/xxxxx, // 请求所需要的的参数 data: { 'page':self.data.page }, success(result){ var resData = result.data; var resLength = result.data.length; //如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0 if (resLength < 1) { self.setData({ state: 0 }); } else { var state1 = 1; //如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载 if (resLength < self.pagesize) { var state1 = 0; } //循环将结果集追加到数组后面 for (var i = 0; i < resLength; i++) { self.data.allProject.push(resData[i]); } self.setData({ articleList: self.data.allProject, state: state1 }); } wx.hideLoading(); } }); }, /** * 下拉刷新 */ onPullDownRefresh() { // 下拉刷新 var self = this; wx.showLoading({ title: '加载中...', }); // 页码重新设置回1 self.data.page = 1; // 将显示列表数据清空 self.data.allProject = []; self.getArticleList(); wx.stopPullDownRefresh(); }, });
可以看到,我们增加了一个onPullDownRefresh函数并在里面调用了getArticleList去请求第一页的数据,并且页面显示数据的数组清空, 页码设置成1,重新加载数据。
另外,下拉刷新的事件也可以通过调用APIwx.startPullDownRefresh触发,效果与用户手动下拉刷新一致。
微信小程序其实我觉得就是一个基于微信的APP。嗯,个人看法。