效果：
代码：
<template><view class="content"><view class="tab"><view v-for="(item,index) in dataList" :key="index" class="tab_item" @click="slideTab(index)">{{item}}</view></view><view class="line"><view class="slide" :style="tabStyle"></view></view></view>
</template>
<script>export default {data() {return {dataList:["用户管理", "配置管理","角色管理","定时任务"],tabStyle: null,}},methods: {slideTab(index) {this.tabStyle = "transform: translateX(" + 100 *index + "px);"}}}
</script>
<style lang="less" scoped>.content {margin: 0 20px;}.tab {display: flex;.tab_item {width: 100px;}}.line {width: 100%;height: 2px;background-color: #ccc;margin-top: 20px;position: relative;.slide {position: absolute;top: 0;left: 0;width: 66px;height: 2px;background-color: #55aaff;transition: transform 0.5s;}}
</style>
