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

这篇具有很好参考价值的文章主要介绍了微信小程序如何及时获取页面循环元素的宽度、高度、距离左边值、函数自调、类似递归、闪屏、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，并把它移动到屏幕可视区域内，在移动的过程中就出现了闪屏效果。文章来源地址https://www.toymoban.com/news/detail-534241.html

到了这里，关于微信小程序如何及时获取页面循环元素的宽度、高度、距离左边值、函数自调、类似递归、闪屏、selectAll、exec、globalData、map、scroll-view的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！