需求:页面有一列表,获取可视区域的数据;滑动过程中不处理,停止滑动后才获取。
实现原理:获取列表中每个条目的位置信息(元素顶部距可视区域顶部的距离),和可视区域比较,在可视范围内即认为可视元素
如下简单html结构
javascript
//列表
<view class="list">
// 每个条目
<view class="item" wx:for={{ data }} data-id={{ item.id }}>{{ item.name }}</view>
</view>
js方法
- 如果不需要判断是否滑动,则在onPageScroll中直接执行getVisibleItems方法即可
最终得到的visibleItems即为可视区域的数据,是一个数组,可通过每个元素的dataset获取绑定在元素上的字段,如上述html中的字段id
javascript
Page({
//....其他逻辑
let scrollTimer = null //定义一个全局的滑动定时器 用来判断是否正在滑动,如果不需要判断是否滑动,则在onPageScroll中直接执行getVisibleItems方法即可
//页面滑动监听方法
onPageScroll: function (e) {
//一直滑动 一直清楚 直到滑动停止1s后,执行获取方法
if(scrollTimer){
clearTimeout(scrollTimer)
}
// 赋值延迟方法 停止滑动后执行
scrollTimer = setTimeout(() => {
this.getVisibleItems()
}, 1000);
},
getVisibleItems(){
//创建一个选择器
const query = wx.createSelectorQuery().in(this);
//获取列表内所有条目元素 在界面的位置信息
query.selectAll('.item').boundingClientRect();
query.selectViewport().scrollOffset();
query.exec((res) => {
//所有选中的条目数据
const listItemRects = res[0];
//获取设备的视口高度 (如果有底导航其他固定底部的元素可在此减去其高度)
const viewportHeight = wx.getSystemInfoSync().windowHeight;
// 获取可见的列表项
const visibleItems = listItemRects.filter(rect => {
//元素局顶部的距离 (如果顶部有固定的tab或导航栏可在此减去其高度)
console.log(rect.top)
console.log(viewportHeight)
// 元素距离顶部的距离在此范围内 即认为在可视范围内
return rect.top && rect.top < viewportHeight;
})
//visibleItems即为可视区域的数据,是一个数组,可通过dataset获取绑定在元素上的字段,如上述html中的字段id
//可做后续逻辑处理
})
},
})