关于uni-app自写tab切换样式调整说明（左右滑动效果）

最近在做uni-app的项目，因tab切换样式需要调整，所以记录一下。另外还碰到了一个小坑，也会在这里说明，并共同探讨（修改版，已经过真机测试）

实现效果图：

 这里先说下遇到的坑，当前标签已有    ：class 的情况下，这时候无论怎么样去添加类（JS代码）都会导致添加的类不生效（没深究，只是考虑下，应该是view层动态绑定后 直接覆盖了class）。

下面是代码：

<!-- 这里只展示日期tab切换代码，echarts代码请查看我的文字：echarts圆环 -->
<view @tap="changeTime(index)" class="time-item" v-for="(item,index) in timeItems" :key="index">
	{{timeIndex==index? '' : item}}
	<view v-show="isNew" :class="[timeIndex==index ? 'cur-time' : '']">{{timeIndex==index? item : ''}}</view>	
	<view v-show="!isNew":class="[timeIndex==index ? 'cur-time' : '', timeIndex==index ? styleClass : '']">{{timeIndex==index? item : ''}}</view>	
</view>

// js
    
	data() {
		return {
			timeIndex: 1, // 默认为近一周
			timeItems: ['近一天', '近一周', '近一月', '近六月', '近一年'],
            isNew: true, // 是否为初始化进入 用来给初始化tab 添加class 样式
            styleClass: '' // 动画类

		}
	},
		// 点击时间tab - 切换函数
		changeTime(index) {
			if (this.timeIndex == index) {
				return;
			}
			this.isNew = false // 点击后改变当前展示 标签
            在timeIndex 还未改变时重置类名
            this.setClass(this.timeIndex, index)
			this.timeIndex = index;
			// this.initData(); 重新设置echarts
		},
        // 设置类名
		setClass(timeIndex, index) {
			if(timeIndex > index){
				this.styleClass = 'slide-left'
			} else if(timeIndex < index) {
				this.styleClass = 'slide-right'
			}
		}

// css 部分
// 最外侧盒子式样
.time-container {
	display: flex;
	justify-content: space-around;
	font-size: 0;
	background-color: #F4F4F4;
	border-radius: 24rpx;
	margin: 30rpx 10rpx 0 10rpx;
	overflow: hidden;
	height: 60rpx;
}

// 每个tab 式样  （未选择的）
.time-item {
	position: relative;
	padding: 0 24rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #969DA3;
    text-align: center;
    line-height: 44rpx;
    margin: 6rpx 0;
	width: 132rpx;
}

// 选中式样
.cur-time {
	position: absolute;
	bottom: 100%;
	width: 132rpx;
    background: #fff;
    color: #1764E8;
    border-radius: 28rpx;
	height: 100%;
	top: 0;
	left: 0;
	font-weight: 700;
	box-shadow: 0px 0px 10px #ccc;
}
// 右滑动
.slide-right {
	animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
// 左滑动
.slide-left {
	animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
// 定义动画-左滑动
@keyframes slide-left {
  0% {
        transform: translateX(100rpx);
  }
  100% {
        transform: translateX(0);
  }
}
// 定义动画-右滑动
@keyframes slide-right {
  0% {
    transform: translateX(-100rpx);
  }
  100% {
    transform: translateX(0);
  }
}