赞
踩
//列表
<view class="list">
// 每个条目
<view class="item" wx:for={{ data }} data-id={{ item.id }}>{{ item.name }}</view>
</view>
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 //可做后续逻辑处理 }) }, })
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。