tabs_current: 1, tabs_list: [{ name: "标签一", value: 1 }, { name: "标签二", value: 2 }, ], computed: { act_left() { return 686 / this.tabs_list.length * (this.tabs_current - 1) + 686 / this.tabs_list.length / 2 } },
<view class="tabs"> <view class="tab-item" v-for="item in tabs_list" :key="item.value" @click="changeNote(item.value)" :class="{'tab-item-act':item.value === tabs_current}"> {{item.name}} </view> <view class="tab-act" :style="{left:`${act_left}rpx`}"> </view> </view>
changeNote(e) { this.tabs_current = e if(this.tabs_current === 1) { } if(this.tabs_current === 2) { } },
.tabs { display: flex; align-items: center; position: relative; .tab-item { font-size: 28rpx; flex: 1; text-align: center; height: 88rpx; line-height: 88rpx; color: #999; transition: all 0.2s; } .tab-item-act { font-weight: bold; color: #1a1a1a; } .tab-act { width: 56rpx; height: 4rpx; background-color: #1ABC9C; position: absolute; border-radius: 2rpx; bottom: 12rpx; transform: translateX(-50%); transition: left 0.5s; } }