需求：頁(yè)面有一列表，獲取可視區(qū)域的數(shù)據(jù)；滑動(dòng)過(guò)程中不處理，停止滑動(dòng)后才獲取。

實(shí)現(xiàn)原理：獲取列表中每個(gè)條目的位置信息（元素頂部距可視區(qū)域頂部的距離），和可視區(qū)域比較，在可視范圍內(nèi)即認(rèn)為可視元素

如下簡(jiǎn)單html結(jié)構(gòu)

//列表
<view class="list">// 每個(gè)條目<view class="item" wx:for={{ data }} data-id={{ item.id }}>{{ item.name }}</view>
</view>

js方法

• 如果不需要判斷是否滑動(dòng)，則在onPageScroll中直接執(zhí)行g(shù)etVisibleItems方法即可

最終得到的visibleItems即為可視區(qū)域的數(shù)據(jù)，是一個(gè)數(shù)組，可通過(guò)每個(gè)元素的dataset獲取綁定在元素上的字段，如上述html中的字段id

Page({//....其他邏輯let scrollTimer = null  //定義一個(gè)全局的滑動(dòng)定時(shí)器 用來(lái)判斷是否正在滑動(dòng)，如果不需要判斷是否滑動(dòng)，則在onPageScroll中直接執(zhí)行g(shù)etVisibleItems方法即可//頁(yè)面滑動(dòng)監(jiān)聽(tīng)方法onPageScroll: function (e) {//一直滑動(dòng) 一直清楚 直到滑動(dòng)停止1s后，執(zhí)行獲取方法if(scrollTimer){clearTimeout(scrollTimer)}// 賦值延遲方法 停止滑動(dòng)后執(zhí)行scrollTimer = setTimeout(() => {this.getVisibleItems()}, 1000);},getVisibleItems(){//創(chuàng)建一個(gè)選擇器const query = wx.createSelectorQuery().in(this);//獲取列表內(nèi)所有條目元素 在界面的位置信息query.selectAll('.item').boundingClientRect();query.selectViewport().scrollOffset();query.exec((res) => {//所有選中的條目數(shù)據(jù)const listItemRects = res[0];//獲取設(shè)備的視口高度 （如果有底導(dǎo)航其他固定底部的元素可在此減去其高度）const viewportHeight = wx.getSystemInfoSync().windowHeight;// 獲取可見(jiàn)的列表項(xiàng)const visibleItems = listItemRects.filter(rect => {//元素局頂部的距離 （如果頂部有固定的tab或?qū)Ш綑诳稍诖藴p去其高度）console.log(rect.top) console.log(viewportHeight)// 元素距離頂部的距離在此范圍內(nèi) 即認(rèn)為在可視范圍內(nèi)return rect.top && rect.top < viewportHeight;})//visibleItems即為可視區(qū)域的數(shù)據(jù)，是一個(gè)數(shù)組，可通過(guò)dataset獲取綁定在元素上的字段，如上述html中的字段id//可做后續(xù)邏輯處理})},
})