uniapp scroll-view选中区动态滚动

			<scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="scrollLeft" :scroll-with-animation="true">
				<view class="contDis">
					<view :class="selectVip==i ? 'oneCardActive' : ''" class="opt" v-for="(item,i) in list"
						@click="onSelectVip(i)">
						<view class="module">
	                            //这里面写样式
						</view>
					</view>
				</view>
			</scroll-view>

<script>
	export default {
		data() {
			return {
				selectVip: 0,//选中元素i
				scrollLeft: 0, //横向滚动位置（距左）
				scrollWidth: 0,//scroll-view宽度
				list: []，//列表数据
			};
		},
		mounted() {
			this.onGetScrollWidth()
		},

		methods: {
			//获取scroll-view宽度
			onGetScrollWidth() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.scroll-view_H').boundingClientRect(e => {
					this.scrollWidth = e.width 
					console.log('获取到', this.scrollWidth)
				}).exec();
				query.selectAll('.opt').boundingClientRect(e => {
					for (let i = 0; i < e.length; i += 1) {
						this.list[i].left = e[i].left; // 子元素离左边的距离
						this.list[i].width = e[i].width //子组件宽度
					}
				}).exec()
			},
			// 点击事件
			onSelectVip(i) {
				this.selectVip = i
				this.scrollLeft = (i - 1) * this.list[i].width 
				// this.scrollLeft = i  * this.list[i].width //最左边
			},

		}
	}
</script>