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

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

js部分：

利用computed属性计算位移距离

 

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

​

css部分：

 

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

 

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