背景:最近在作个相似于美团的小程序,正好遇到了这种需求,记录下。
思路:思路其实挺简单的,就是监听滚动条滚动事件,判断到了底部的时候,数据的一个累加,要实现这种功能接口需支持分页功能
话很少说,直接上代码:javascript
一、html页面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>
二、js页面
监听屏幕滚动的方法可参考:https://blog.csdn.net/qq_38194393/article/details/89282842
判断到底部的思路:
拿到屏幕包含滚动看不见的地方的总体的高度 - 可见区域高度 = scrollTop高度java
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 }) }, }) }