前已经完成了小程序的列表展示,但是对于上拉和下拉刷新这个功能,其实跟小程序的生命周期有关系,一起回顾下完成,上拉和下拉刷新。源码:https://github.com/limingios/wxProgram.git 中wx-springboot 和 No.15
创新互联秉承实现全网价值营销的理念,以专业定制企业官网,成都网站设计、网站建设,微信小程序,网页设计制作,成都做手机网站,全网整合营销推广帮助传统企业实现“互联网+”转型升级专业定制企业官网,公司注重人才、技术和管理,汇聚了一批优秀的互联网技术人才,对客户都以感恩的心态奉献自己的专业和所长。
回顾下 page的生命周期
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
列表小程序端完成 上拉,下拉刷新功能
onReachBottom 上拉刷新
onPullDownRefresh 下拉刷新
需要在
app.json
的window
选项中或页面配置中开启enablePullDownRefresh
。可以通过
wx.startPullDownRefresh
触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。当处理完数据刷新后,
wx.stopPullDownRefresh
可以停止当前页面的下拉刷新。
const app = getApp() Page({ data: { // 用于分页的属性 totalPage: 1, page: 1, videoList: [], screenWidth: 350, serverUrl: "", }, onLoad: function (params) { var me = this; var screenWidth = wx.getSystemInfoSync().screenWidth; me.setData({ screenWidth: screenWidth, }); // 获取当前的分页数 var page = me.data.page; me.getAllVideosList(page); }, getAllVideosList:function(page){ var me = this; var serverUrl = app.serverUrl; wx.showLoading({ title: '请等待,加载中...', }); wx.request({ url: serverUrl + '/video/showAll?page=' + page, method: "POST", success: function (res) { wx.hideLoading(); wx.hideNavigationBarLoading(); wx.stopPullDownRefresh(); console.log(res.data); // 判断当前页page是否是第一页,如果是第一页,那么设置videoList为空 if (page === 1) { me.setData({ videoList: [] }); } var videoList = res.data.data.rows; var newVideoList = me.data.videoList; me.setData({ videoList: newVideoList.concat(videoList), page: page, totalPage: res.data.data.total, serverUrl: serverUrl }); } }) }, onPullDownRefresh: function (params) { var me = this; wx.showNavigationBarLoading(); me.getAllVideosList(1); }, onReachBottom: function (params){ var me = this; var currentPage = me.data.page; var totalPage = me.data.totalPage; //判断当前页数和总页数是否相等,如果相同已经无需请求 if (currentPage == totalPage){ wx.showToast({ title: '已经没有视频啦~', icon:"none" }) return; } var page = currentPage+1; me.getAllVideosList(page); } })
PS:上拉刷新不需要做任何的配置,下拉刷新需要开启配置,每次请求建议开启 wx.showNavigationBarLoading() 和 wx.hideNavigationBarLoading(); 配合使用。
文章题目:「小程序JAVA实战」小程序页面的上拉下拉刷新(50)
网站地址:http://lswzjz.com/article/gshoic.html