就是点击tab导航栏上的选项， :scroll-left="scrollLeft" 发生变化后自动滚动的有些生硬
methods: {
//导航栏点击事件active
onTbaClick(index) {
//点把导航栏时，把当前index值赋值给activeIndex
this.activeIndex = index;
this.tabToIndex();
},
//退据当前的activeIndex,计算滑块的滚动位置
tabToIndex() {
const index = this.activeIndex;
this.slider = {
left: this.tabList[this.activeIndex]._slider.left,
};
this.scrollLeft = index * this.defaultConfig.underLineWidth;
},
//更新tab的宽度
updateTabWidth() {
let data = this.tabList;
if (data.length === 0) return;
//uniApp 中拿到渲染之后的dom
//获取 dom的固定写法
const query = uni.createSelectorQuery().in(this);
data.forEach((item, index) => {
query
.select("#_tab_" + index)
.boundingClientRect((res) => {
item._slider = {
left:
res.left + (res.width - this.defaultConfig.underLineWidth) / 2,
};
if (data.length - 1 === index) {
this.tabToIndex();
}
})
.exec();
});
},
},
00
