微信小程序实现下拉到底部加载数据

背景:最近在做个类似于美团的小程序,正好遇到了这种需求,记录下。
思路:思路其实挺简单的,就是监听滚动条滚动事件,判断到了底部的时候,数据的一个累加,要实现这种功能接口需支持分页功能
话不多说,直接上代码:

1、html页面

 <view class="businessList">
<view class="businessList-title">附近优选商家</view>
<view class="businessList-item" wx:for="{{businessList}}" wx:key="index" data-merchantId="{{item.merchantId}}" bindtap="toStoreDetails">
<view class="item-image-box">
<image class="item-image" src="{{item.shopViewUrl}}"></image>
</view>
<view class="item-content">
<view class="item-name">{{item.brandName}}{{index}}</view>
<view class="item-desc">
<view class="item-desc-detail">{{item.className}}</view>
<view class="item-desc-detail">{{item.tradingAreaName}}</view>
</view>
<view class="item-other">
<view>
<view class="item-other-grade">{{item.appraisePoints}}分</view>
<view class="item-other-num">月销{{item.monthlySales}}</view>
</view>
<view class="item-other-distance">{{item.distance}}m</view>
</view>
</view>
</view>
</view>
<view wx:if="{{isMore}}">加载中</view>
<view wx:if="{{noMore}}">没有更多了</view>

2、js页面
监听屏幕滚动的方法可参考:https://blog.csdn.net/qq_38194393/article/details/89282842
判断到底部的思路:
拿到屏幕包含滚动看不见的地方的整体的高度 - 可见区域高度 = scrollTop高度

data:{
pageNum:0, // 页码,第一页
pageSize:10,
businessList:[], // 列表数据
allHeight:null, // 整个屏幕高度(包含不可见区域)
clientHight:null, // 可见区域屏幕高度,不包含滚动条折叠不可见区域
isMore:false, // 加载中
noMore:false, // 没有更多了
gap:null, // 第二次后者更后面计算整个高度的时候(包含不可见区域)会有误差,需要加上这个误差
num:0
}
// 获取列表数据,这里是封装好的请求
getStoreList:function(latitude,longitude){
const that = this
axios({
url:'/merchant/merchantShop/list',
method:'POST',
data:{
pageNum:that.data.pageNum,
pageSize:that.data.pageSize
}
}).then(res =>{
if(res.data.code === 0){
const businessList = that.data.businessList
if(res.data.data.list.length>0){
res.data.data.list.forEach(item=>{
businessList.push(item)
})
}else{
// 当每次累加页码查出来无数据时,需设置展示“”“没有更多了”
that.setData({
noMore:true
})
}
that.setData({
businessList: businessList,
isMore:false
})
that.pageScrollToBottom() //调用获取屏幕整个高度(包含不可见区域)的方法
}else{
wx.showToast({
title: res.data.msg,
icon:'none'
})
}
}).catch(error=>{
wx.showToast({
title: error,
icon:'none'
})
})
},
// 获取屏幕总高度(包含不可见区域)
pageScrollToBottom: function () {
const that = this
wx.createSelectorQuery().select('#home').boundingClientRect(function (rect) {
// 计算第一次的差值,这时候才能算出真正的高度,第二次及以后bottom的值不正确
if(that.data.num===0){
const gap = rect.bottom-rect.height
that.setData({
gap:gap
})
}
const num = that.num+1
that.setData({
num:num
})
that.setData({
allHeight:rect.height+that.data.gap //
})
}).exec()
},
// 监听屏幕滚动事件,只要屏幕往上或者往下滚动都会触发此方法
onPageScroll: function(e){
if(this.data.allHeight-this.data.clientHight===e.scrollTop){ // 判断是否滚动动到底部
if( !this.data.noMore ){
const pageNum = this.data.pageNum +1
this.setData({
isMore : true,
pageNum:pageNum
})
this.getStoreList(app.globalData.latitude,app.globalData.longitude)
}
}
},
onLoad: function () {
// 获取可见区域高度
wx.getSystemInfo({
success: function(res) {
that.setData({
clientHight:res.windowHeight
})
},
})
}

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

微信小程序实现下拉到底部加载数据

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 微信小程序实现下拉到底部加载数据
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏