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

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

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

如下简单html结构

1. //列表
2. <view class="list">
3.         // 每个条目
4.         <view class="item" wx:for={{ data }} data-id={{ item.id }}>{{ item.name }}</view>
5. </view>

复制代码

js方法

• 如果不需要判断是否滑动，则在onPageScroll中直接执行getVisibleItems方法即可
  

最终得到的visibleItems即为可视地区的数据，是一个数组，可通过每个元素的dataset获取绑定在元素上的字段，如上述html中的字段id

1. Page({
2.         //....其他逻辑
3.         let scrollTimer = null  //定义一个全局的滑动定时器 用来判断是否正在滑动，如果不需要判断是否滑动，则在onPageScroll中直接执行getVisibleItems方法即可
4.         //页面滑动监听方法
5.         onPageScroll: function (e) {
6.                 //一直滑动 一直清楚 直到滑动停止1s后，执行获取方法
7.                 if(scrollTimer){
8.               clearTimeout(scrollTimer)
9.             }
10.             // 赋值延迟方法 停止滑动后执行
11.             scrollTimer = setTimeout(() => {
12.               this.getVisibleItems()
13.             }, 1000);
14.         },
15.         getVisibleItems(){
16.                 //创建一个选择器
17.                 const query = wx.createSelectorQuery().in(this);
18.                 //获取列表内所有条目元素 在界面的位置信息
19.             query.selectAll('.item').boundingClientRect();
20.             query.selectViewport().scrollOffset();
21.             query.exec((res) => {
22.               //所有选中的条目数据
23.               const listItemRects = res[0];
24.               //获取设备的视口高度 （如果有底导航其他固定底部的元素可在此减去其高度）
25.               const viewportHeight = wx.getSystemInfoSync().windowHeight;
26.               // 获取可见的列表项
27.               const visibleItems = listItemRects.filter(rect => {
28.                       //元素局顶部的距离 （如果顶部有固定的tab或导航栏可在此减去其高度）
29.                 console.log(rect.top)
30.                 console.log(viewportHeight)
31.                 // 元素距离顶部的距离在此范围内 即认为在可视范围内
32.                 return rect.top && rect.top < viewportHeight;
33.               })
34.               //visibleItems即为可视区域的数据，是一个数组，可通过dataset获取绑定在元素上的字段，如上述html中的字段id
35.               //可做后续逻辑处理
36.             })
37.         },
38. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。