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

---

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，并把它移动到屏幕可视区域内，在移动的过程中就出现了闪屏效果。