需求:页面有一列表,获取可视区域的数据;滑动过程中不处理,停止滑动后才获取。
实现原理:获取列表中每个条目的位置信息(元素顶部距可视区域顶部的距离),和可视区域比较,在可视范围内即认为可视元素
如下简单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; } ) } ) } ,
} )