微信小程序如何及时获取页面循环元素的宽度高度距离左边值函数自调类似递归闪屏selectAllexecglobalDatamapscroll-view

Posted 2023-02-20 牧碼人

文章目录

• 1、参数说明
• 2、JavaScript部分
• 3、代码解析

---

1、参数说明

distanceLeft：定义一个数组存储各个循环元素距离左边的值。
isPage：控制页面显示与隐藏。
scrollLeft：动态设置滚动距离。
isAactivity：存储tabBar对应id值。因为从tabBar页面跳转到tabBar页面时不能在路径上携带参数，所以此参数存储在全局变量中。

---

2、javascript部分

obtainWidth() 
	let that = this,
		query = wx.createSelectorQuery();
	
	query = query.selectAll('#idScrollLeft').boundingClientRect();
	
	query.exec(function (res) 
		that.setData(
			distanceLeft: res[0].map(item => item.left)
		, function () 
			let key = getApp().globalData.isAactivity,
				distanceLeft = that.data.distanceLeft;
	
			// 获取横向滚动各个元素宽度
			if (distanceLeft.length === 0) 
				that.obtainWidth();
			 else 
				that.setData(
					scrollLeft: that.data.distanceLeft[key - 1]
				, function () 
					wx.hideLoading();
				);
			
		);
	);

---

3、代码解析

在微信小程序中使用scroll-view组件实现动态设置滚动条距离，在本人的项目中需要通过首页点击tabBar进入分类页面，所以在分类页面使用scroll-view组件实现分类页面的横向tabBar功能。当从首页点击不同的tabBar进入分类页面时需要显示对应的tabBar项在页面可视区域内。idScrollLeft是组建id，定义在每个循环出来的tabBar项上面，通过微信小程序相关的API可以获取到每个tabBar距离左边的值。此文章主要的特点是，当第一次执行函数的时候无法获取到对应的距离值，这是因为页面还没有渲染，所以就获取不到，本人尝试使用this.setData里面的第二个参数解决，但是解决不了；也尝试使用wx.nextTick()解决，结果也是无济于事。最后还是通过判断distanceLeft.length === 0时继续函数自调的方式实现。此方案存在一个闪屏问题，目前还没有找到合适的方法解决。闪屏内容如下，在首页通过tabBar进入分类页面时，首先要渲染分类页面，此时distanceLeft还没有获取到对应的值，所以动态的定位值为0，当再次调用obtainWidth函数时才得到对应值。此时才设置对应距离值，如果这个tabBar不是首个，那么就会定位到对应tabBar，并把它移动到屏幕可视区域内，在移动的过程中就出现了闪屏效果。