思路:当前点击子元素距离左边栏的距离 - scroll-view 宽度的一半 + 当前点击子元素一半的宽度 实现居中展示
<scroll-view class="scroll-x" scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation>
<view @click="titleClick(index)" :class="currentIndex == index ? 'active nav1-item' : 'nav1-item'" v-for="(item,index) in timeNavList" :key='index' >
{{item.title}}
{{item.desc}}
</view>
</scroll-view>
data() {
return {
contentScrollW: 0, // 导航区宽度
scrollLeft: 0, // 横向滚动条位置
currentIndex: 5,
timeNavList: [
{
title:'标题1',
desc:'10:00',
},
{
title:'标题2',
desc:'10:00',
},
{
title:'标题3',
desc:'10:00',
},
{
title:'标题4',
desc:'10:00',
},
{
title:'标题5',
desc:'10:00',
},
{
title:'标题6',
desc:'10:00',
},
],
}
}
async mounted() {
// 获取标题区域宽度,和每个子元素节点的宽度
await this.getScrollW()
// 初始化位置
this.scrollLeft = this.timeNavList[this.currentIndex].left - this.contentScrollW / 2 + this.timeNavList[this.currentIndex].width / 2;
},
titleClick(index){
this.scrollLeft = this.timeNavList[index].left - this.contentScrollW / 2 + this.timeNavList[index].width / 2;
this.currentIndex=index
},
// 获取标题区域宽度,和每个子元素节点的宽度以及元素距离左边栏的距离
getScrollW() {
return new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('.scroll-x').boundingClientRect(data => {
if (data) {
this.contentScrollW = data.width;
query.selectAll('.nav1-item').boundingClientRect(items => {
if (items && items.length > 0) {
items.forEach((item, index) => {
// scroll-view 子元素组件距离左边栏的距离
this.timeNavList[index].left = item.left;
// scroll-view 子元素组件宽度
this.timeNavList[index].width = item.width;
});
resolve();
} else {
reject(new Error("No elements found for '.nav1-item'"));
}
}).exec();
} else {
reject(new Error("No element found for '.scroll-x'"));
}
}).exec();
});
}