const { itemMargin, padding } = this.props;
let width = 0;
this.systemInfo = await Taro.getSystemInfo();
this.scale = this.systemInfo.screenWidth / 750;
console.log('屏幕缩放比-------->', this.systemInfo);
const query = Taro.createSelectorQuery().in(this.$scope);
query
.selectAll('#item')
.boundingClientRect(res => {
const listRef = res.filter(
(item, index, arr) => index < arr.length / 2
);
listRef.forEach(ref => {
width += ref.width + itemMargin * this.scale;
});
// 最终width为减去一个最左边的margin和加上两个预留的两端的padding值
const containerWidth =
width - itemMargin * this.scale + padding * this.scale * 2;
this.setState({
containerWidth,
listRef
});
})
.exec();
使用.in(this.$scope); 传入this.$scope指明选择器的选取范围为当前自定义组件 component 内;
在所有的操作最后必须调用.exec(), 来执行所有的代码语句请求。