微信小程序 scroll-view实现上拉加载与下拉刷新的实例
发布时间:2020-12-14 20:21:10 所属栏目:资源 来源:网络整理
导读:微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var GetList = function (that) { that.setData({ hidden: false }); wx.request({ url: u
微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var GetList = function (that) {
that.setData({ hidden: false }); wx.request({ url: url,data: { pageSize: 10,pageNo: page },success: function (res) { var l = that.data.list for (var i = 0; i < res.data.length; i++) { l.push(res.data[i]) } that.setData({ list: l }); page++; that.setData({ hidden: true }); } }); } Page({ data: { hidden: true,list: [],scrollTop: 0,scrollHeight: 0 },onLoad: function () { var that = this; wx.getSystemInfo({ success: function (res) { console.info(res.windowHeight); that.setData({ scrollHeight: res.windowHeight }); } }); },onShow: function () { var that = this; GetList(that); },bindDownLoad: function () { var that = this; GetList(that); },scroll: function (event) { this.setData({ scrollTop: event.detail.scrollTop }); },refresh: function (event) { page = 1; this.setData({ list: [],scrollTop: 0 }); GetList(this) },onPullDownRefresh: function () { console.log("下拉") },onReachBottom: function () { console.log("上拉"); } }) json文件代码 wxml文件代码: wxss文件代码 .item{
display: flex; margin-bottom: 50rpx; width:100%; background:#f0f0f0; overflow:hidden; } .img{ .text{ .title{ 注意, 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |