<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,
scrollLeft: 0,
scrollWidth: 0,
list: [],
};
},
mounted() {
this.onGetScrollWidth()
},
methods: {
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
},
}
}
</script>