2021-04-20 分类: 微信小程序
1.app.json中:
"window": {
"enablePullDownRefresh": true //是否开启当前页面下拉刷新
}
2.wxml中:
{{item.title}} {{item.inputtime}} {{item.content}}
3.js中:
data: { hidden: true, //隐藏表单控件 page: 1, //当前请求数据是第几页 pageSize: 10, //每页数据条数 hasMoreData: true, //上拉时是否继续请求数据,即是否还有更多数据 contentlist: [], //获取的数据列表,以追加的形式添加进去 }, // 获取分页列表 getInfo: function (message) { var that = this; wx.showNavigationBarLoading() //在当前页面显示导航条加载动画 wx.showLoading({ //显示 loading 提示框 title: message, }) wx.request({ url: 'http://localhost:88/wechat/test.php', //本地设置不校验合法域名 data: { page: that.data.page, count: that.data.pageSize }, method: 'post', header: { 'content-type': 'application/x-www-form-urlencoded' }, success: function (res) { var contentlistTem = that.data.contentlist; if (res.data.length > 0) { wx.hideNavigationBarLoading() //在当前页面隐藏导航条加载动画 wx.hideLoading() //隐藏 loading 提示框 if (that.data.page == 1) { contentlistTem = [] } var contentlist = res.data; if (contentlist.length < that.data.pageSize) { that.setData({ contentlist: contentlistTem.concat(contentlist), hasMoreData: false }) } else { that.setData({ contentlist: contentlistTem.concat(contentlist), hasMoreData: true, page: that.data.page + 1 }) } } }, fail: function (res) { wx.hideNavigationBarLoading() wx.hideLoading() fail() }, complete: function (res) { }, }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 var that = this that.getInfo('正在加载数据...') }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { this.data.page = 1 this.getInfo('正在刷新数据') }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { if (this.data.hasMoreData) { this.getInfo('加载更多数据') } else { wx.showToast({ title: '没有更多数据', }) } }
分享题目:微信小程序中的加载更多(即列表分页)
链接分享:https://www.cdcxhl.com/news/109097.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有微信小程序等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容