（uniapp）简单带动画的tab切换效果

雷加祥

于 2024-06-03 14:37:26 发布

阅读量447

点赞数 1

分类专栏： VUE 文章标签： uni-app javascript vue

本文链接：https://blog.csdn.net/m0_37408390/article/details/139414234

版权

VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

代码

<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%;//这里的宽度根据自己tab来设定
    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>