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

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

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

如下简单html结构
javascript 复制代码
//列表
<view class="list">
	// 每个条目
	<view class="item" wx:for={{ data }} data-id={{ item.id }}>{{ item.name }}</view>
</view>
js方法
  • 如果不需要判断是否滑动,则在onPageScroll中直接执行getVisibleItems方法即可
最终得到的visibleItems即为可视区域的数据,是一个数组,可通过每个元素的dataset获取绑定在元素上的字段,如上述html中的字段id
javascript 复制代码
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
	      //可做后续逻辑处理
	    })
	},
})
相关推荐
丁总学Java4 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域5 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8685 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165026 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦13 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac16 小时前
微信小程序的组件
微信小程序
stormjun18 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck18 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23420 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong20 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序