直播源码开发，vue 简单的tab切换滑动效果

直播源码开发，vue 简单的tab切换滑动效果

js部分：

利用computed属性计算位移距离

 

1

<br>data() {<br>        return {<br>            value: '0'<br>        };<br>    },<br>    computed: {<br>        sty() {<br>            let num = Number(this.value) * 100<br>            return `transform: translateX(-${num/3}%);transition: all 0.3s;`<br>        }<br>    },<br>    methods: {<br>        tab(v) {<br>            this.value = v<br>        }<br>    },<br>

​

css部分：

 

1	<br><style><br>.tab-content {<br>  width: 300%;<br>}<br>.content {<br>  width: 1104px;<br>  flex-shrink: 0;<br>}<br></style>

 

 以上就是 直播源码开发，vue 简单的tab切换滑动效果，更多内容欢迎关注之后的文章