需求:页面有一列表,获取可视区域的数据;滑动过程中不处理,停止滑动后才获取。
实现原理:获取列表中每个条目的位置信息(元素顶部距可视区域顶部的距离),和可视区域比较,在可视范围内即认为可视元素
如下简单html结构
<view class="list"><view class="item" wx:for={{ data }} data-id={{ item.id }}>{{ item.name }}</view>
</view>
js方法
- 如果不需要判断是否滑动,则在onPageScroll中直接执行getVisibleItems方法即可
最终得到的visibleItems即为可视区域的数据,是一个数组,可通过每个元素的dataset获取绑定在元素上的字段,如上述html中的字段id
Page({let scrollTimer = null onPageScroll: function (e) {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 => {console.log(rect.top) console.log(viewportHeight)return rect.top && rect.top < viewportHeight;})})},
})