Vue中使用transform的translateX来实现下滑线跟随导航。
直接看代码。
1、template中的代码
<ul class="tab" :style="{height: tabheight}"> <li ref="iWidth" v-for="(item,index) in tabList" :key="index" :class="{'on': checkindex == index}" @click="checkli(index)" >{{item}}</li> <i :style="{transform:`translateX(${iWidths/2+checkindex*iWidths}px) translateX(-50%)`}"></i> </ul>
2、css
ul.tab { height: 1000px; width: 100%; border-bottom: 1px solid #eeeeee; line-height: 1rem; font-size: 0.32rem; color: #333333; display: flex; position: relative; overflow: hidden; transition: all 0.5s; } .tab li { flex: 1; text-align: center; transition: all 0.5s; } .tab li.on { color: #da0428; } .tab i { width: 0.6rem; height: 0.05rem; border-radius: 0.03rem; background: #da0428; bottom: 0; position: absolute; transition: all 0.5s; }
3、JS代码(实现的主要思路就是通过给元素添加ref属性通过this.$refs.xxx获取此元素的宽度,再配合transform中的translateX属性进行使用。)
<script> export default { name: "orderIndex", data() { return { tabheight: "1rem", checkindex: 0, tabList: ["全部订单", "待付款", "待收货", "待评价"], iWidths: 0 }; }, mounted() { var tab = this.$route.query.tab; if (tab != undefined && tab != "undefined" && tab != null && tab != "") { this.checkindex = tab; } this.$nextTick(function () { this.iWidths = this.$refs.iWidth[0].clientWidth }) }, methods: { checkli(index) { this.checkindex = index; }, }, components: { } }; </script>
是我吖~