原理是通过 swiper 组件来实现,通过事件对象切换索引即可
swiper-item则是每个选项卡。实例代码
<template>
<view>
<view class="myTabs" style="display: flex; flex-direction: row; justify-content: space-around;">
<view :key="0" :class="{'activedTab':activedTab == 0}" @click="activedTab = 0">
第一类
</view>
<view :key="1" :class="{'activedTab':activedTab == 1}" @click="activedTab = 1">
第二类
</view>
</view>
<view style="height: 60rpx; background-color: #A5A5A5;">
</view>
<swiper :current="activedTab" :autoplay="false" :duration="300" @change="changeContentBox">
<swiper-item>
<view>
第一屏内容
</view>
<view>
当前activedTab = {{activedTab}}
</view>
</swiper-item>
<swiper-item>
<view>
第二屏内容
</view>
<view>
当前activedTab = {{activedTab}}
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
activedTab: 0
}
},
methods: {
changeContentBox(e){
this.activedTab = e.detail.current
}
},
onLoad () {
}
}
</script>
<style>
.activedTab {
font-size: 50rpx;
color: red;
font-weight: bold;
}
</style>
样式自己修改