左右滑动分类列表 背景图跟随选中状态改变位置 滑动时跟随文字滑动

1.左右滑动背景跟随文字滑动
2.背景图跟着选中状态改变位置

    <view class="tab_item_box"><view class="tab_item_flex"><view class="tab_bg_text_item"><image:src="tab_active":style="{marginLeft: accumulatedWidth + 'rpx',transform: 'translateX(-28%)',}"class="tab_active_img"mode="scaleToFill"/><view class="tab_text_item"><viewclass="tab_item"v-for="(item, index) in organList":key="index":class="{ tab_active: index === activeTab }"@click="setorganData(item.id, index)">{{ item.type }}</view></view></view></view></view>calculateAccumulatedWidth() {this.$nextTick(() => {const itemWidth = 150;// 计算前面所有标签的累计宽度this.accumulatedWidth = this.activeTab * itemWidth;});},
setorganData(id, index) {this.activeTab = index;// 切换标签时计算累计宽度this.$nextTick(() => {this.calculateAccumulatedWidth();});
},watch: {// 监听organList变化，数据加载完成后计算organList: {handler() {this.$nextTick(() => {this.calculateAccumulatedWidth();});},deep: true,},// 监听activeTab变化，重新计算累计宽度activeTab: {handler() {this.$nextTick(() => {this.calculateAccumulatedWidth();});},},},