微信小程序—页面滑动，获取可视区域数据

需求：页面有一列表，获取可视区域的数据；滑动过程中不处理，停止滑动后才获取。

实现原理：获取列表中每个条目的位置信息（元素顶部距可视区域顶部的距离），和可视区域比较，在可视范围内即认为可视元素

如下简单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中直接执行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//可做后续逻辑处理})},
})