效果图
代码
<template><view class="tabBox"><view :style="{transform: `translateX(${translateX})`}" class="whiteBox"></view><view @click="changeTab(k)" class="itemBox" v-for="(v,k) in tabList" :key="k">{{ v }}</view></view>
</template><script>
export default {data() {return {currentIndex: 0,tabList: ['TAB1', 'TAB2', 'TAB3', 'TAB4'],};},computed: {translateX() {return this.currentIndex * 100 + '%';}},methods: {changeTab(index) {this.currentIndex = index;}}
}
</script><style lang="scss" scoped>
.tabBox {display: flex;position: relative;background-color: #04f6f6;.whiteBox {position: absolute;width: 25%;height: 100rpx;background: white;transition: transform 0.3s;z-index: 0;}.itemBox {width: 25%;height: 100rpx;text-align: center;line-height: 100rpx;z-index: 1;}}
</style>
