uni-app 动态导航下标动画滑动效果

先上效果图

如图，导航是动态获取的scroll滑块，点击每一个块会动态滑动到对应的下标。

实现思路

1、要先获取到每个导航的宽度，直接用选择器获取createSelectorQuery（动态导航可能会获取到位null的值，所以要在渲染之后去获取，我是给个定时器，有没有像vue一样dom更新后执行的方法啊，欢迎留言！）

2、要居中显示下标。计算方式是（（元素宽-下标宽度）/2）+左边的边界）+左边所有元素总宽度。因为createSelectorQuery是px像素，所以我们要用uni.upx2px()这个方法转一下再计算，具体看代码

3、uni-app不允许动态绑定upx，所以我直接加上px了，

直接上代码

//js部分代码
data(){
    return{
		nav:['改良土壤','土壤','改良土','改良土壤','改壤','改良土','改良土壤','改壤'],
		navWidth:[],
		navindex:0,
    }
}
getScrollWidth(){
	const that =this;
	const obj=wx.createSelectorQuery();
	obj.selectAll('.nav .item').boundingClientRect();
	obj.exec(function (rect) {
		let leftW=0;//左边所有元素的宽度相加
		rect[0].map(item=>{
		    //其中25为margin-left:25upx;30为下标宽度
			let val = leftW+(((item.width-uni.upx2px(30))/2)+uni.upx2px(25));
			that.navWidth.push(val + 'px');
			leftW +=(item.width+uni.upx2px(25));
		})
	}) ;
},
onNavIndex(index){
	this.navindex = index
}

//html部分代码，.left为relative
<scroll-view scroll-x="true" class="scroll-nav">
	<div class="left flex-center">
		<div class="item" :class="{'active':index==navindex}" 
			v-for="(item,index) in nav" :key="index"
			@click="onNavIndex(index)"
			>{{item}}
		</div>
		<!-- 滑动的下标 -->
		<div class="active-border" :style="'left:'+navWidth[navindex]"></div>
	</div>
</scroll-view>