随着百度小程序的风头正劲,越来越多的站长投入到百度小程序的开发中来，但是开发过程中难免会碰到诸多问题无法自己解决，20天前小编发现百度用户：【不怕不怕503】提出了一个关于“关于自定义组件里createSelectorQuery内selectAll的查询范围问题”的问题,在问题中开发者不怕不怕503对该问题做了如下阐述：

• 问题类型:bug

前置操作（正常执行某类操作）

首先我是用uniapp开发的，我有个类似跑马灯的组件，会在for循环中复用多次，效果图如下：

该图片引用百度小程序公众平台

在一个home.vue的文件调用home-top-item的自定义组件，调用的for循环代码如下：

<!-- 置顶区 -->
<view class="top-section">
<home-top-item v-for="(item,index) in topItemList" :key="index" :topList="item" :data-news="item"></home-top-item>
</view>

在自定义组件home-top-item中，会去获取一个元素的宽度，代码如下：

// 获取相关的宽度
getAllElementWidth: function(selector) {
	let _this = this;
	return new Promise(function(resolve, reject) {
		let query = uni.createSelectorQuery().in(_this);
		query.selectAll('.top-wrapper>.title').boundingClientRect(data => {
			let totalWidth = 0;
			data.forEach((item) => {
				totalWidth += item.width;
			});
			resolve(totalWidth);
		}).exec();
	});
},

 

预期结果（应该出现的结果）

在当前这个组件里找到’.top-wrapper>.title’对应的所有节点，并返回总宽度，3个自定义组件返回各自的总宽度。

 

实际结果（实际出现的异常结果）

结果却是for循环出来的3个自定义组件返回的最终总宽度完全一致，于是我猜测可能是selectAll是在整个页面里查找了’.top-wrapper>.title’，所以导致3个组件查找都是找到了页面内的第一个节点，所以返回一样。

注：以上代码在微信小程序和华为快应用里运行都是能达到预期结果的，都是正常的。

 

然后我采用了在自定义组件里定义了id=’topWrapper’ + index的方式，其中index是for循环的序号，这样就保证了3个自定义组件都拥有各自不同的id，改后的代码如下：

// 获取相关的宽度
getAllElementWidth: function(selector) {
	let _this = this;
	return new Promise(function(resolve, reject) {
		let query = uni.createSelectorQuery().in(_this);
		query.selectAll(`#topWrapper${_this.compIndex}>.title`).boundingClientRect(data => {
			let totalWidth = 0;
			data.forEach((item) => {
				totalWidth += item.width;
			});
			resolve(totalWidth);
		}).exec();
	});
},

这样就达到预期效果了，所以就印证了我上面的猜测。

 

总结：在自定义组件里的selectAll应该是只查找该组件内的节点，而不应该查找整个页面的节点，请确认是否存在这个问题。

 

注：以上是百度小程序开发者：”不怕不怕503″对于本问题的一些阐述，这里做一个引用，我们将实时关注百度小程序助手对该问题提出的解决方案。

【20天前】百度官方对用户不怕不怕503提出的关于自定义组件里createSelectorQuery内selectAll的查询范围问题给予如下回复

当然了，也有可能是uniapp的问题，建议你们也用uniapp写个demo试一下

百度小程序的优势是，其用户体验可以最大限度的接近Native App。因此，百度智能小程序也把用户体验作为一个核心进行了优化

如果您也在使用百度小程序，请关注我们，如果您有关于百度小程序的使用问题请联系我们，或者去百度小程序平台找官方人员给予解决，相信百度在小程序上的发力会是一个里程碑！