uniapp tab组件

1. uniapp tab组件

1.1. 直接拆开使用

<template><view><view class="head-nav"><view :class="navIndex==0?'activite':''" @click="checkIndex(0)">设备信息</view><view :class="navIndex==1?'activite':''" @click="checkIndex(1)">专家信息</view><view :class="navIndex==2?'activite':''" @click="checkIndex(2)">故障信息</view><view :class="navIndex==3?'activite':''" @click="checkIndex(3)">缺陷信息</view><view :class="navIndex==4?'activite':''" @click="checkIndex(4)">报废信息</view></view><!-- 内容切换 --><view class="content" v-if="navIndex==0">我是选项1</view><view class="content" v-if="navIndex==1">我是选项2</view><view class="content" v-if="navIndex==2">我是选项3</view><view class="content" v-if="navIndex==3">我是选项4</view><view class="content" v-if="navIndex==4">我是选项5</view></view></template><script>export default {data() {return {navIndex: 0,}},methods: {checkIndex(index) {console.log(index)this.navIndex = index;},}}
</script><style scoped>.head-nav {margin: 20rpx auto;display: flex;justify-content: space-between;align-items: center;color: #CCCCCC;}.activite {color: #04c9c3;}.head-nav>view {padding-bottom: 10rpx;}.content {/* background: #008000; */height: 100%;}
</style>

1.2. 使用scroll-view滑动

<template><view><scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll"><view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id":class="navIndex==index ? 'activite' : ''" @click="checkIndex(index)">{{tab.name}}</view></scroll-view><!-- 内容切换 --><view class="content" v-if="navIndex==0">我是选项1</view><view class="content" v-if="navIndex==1">我是选项2</view><view class="content" v-if="navIndex==2">我是选项3</view><view class="content" v-if="navIndex==3">我是选项4</view><view class="content" v-if="navIndex==4">我是选项5</view><view class="content" v-if="navIndex==5">我是选项6</view><view class="content" v-if="navIndex==6">我是选项7</view><view class="content" v-if="navIndex==7">我是选项8</view><view class="content" v-if="navIndex==8">我是选项9</view></view></template><script>export default {data() {return {navIndex: 0,tabBars: [{name: '关注',id: 'guanzhu'}, {name: '推荐',id: 'tuijian'}, {name: '体育',id: 'tiyu'}, {name: '热点',id: 'redian'}, {name: '财经',id: 'caijing'}, {name: '娱乐',id: 'yule'}, {name: '军事',id: 'junshi'}, {name: '历史',id: 'lishi'}, {name: '本地',id: 'bendi'}],}},methods: {checkIndex(index) {console.log(index)this.navIndex = index;},scroll: function(e) {console.log(e)this.old.scrollTop = e.detail.scrollTop},}}
</script><style scoped>.activite {color: #04c9c3;}.content {/* background: #008000; */height: 300px;}.scroll-view_H {white-space: nowrap;width: 100%;color: #CCCCCC;}.scroll-view-item_H {display: inline-block;width: 20%;height: 50rpx;line-height: 50rpx;text-align: center;padding: 10px 0;}
</style>

1.3. scroll-view + swiper

<template><view><!--顶部导航栏--><scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll"><view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id":class="navIndex==index ? 'activite' : ''" @tap="checkIndex(index)">{{tab.name}}</view></scroll-view><!-- 内容 --><swiper :current="navIndex" @change="tabChange" class="content"><swiper-item class="swiper_item ">设备信息</swiper-item><swiper-item class="swiper_item ">专家信息</swiper-item><swiper-item class="swiper_item ">故障信息</swiper-item><swiper-item class="swiper_item ">缺陷信息</swiper-item><swiper-item class="swiper_item ">报废信息</swiper-item></swiper></view>
</template><script>export default {data() {return {scrollTop: 0,navIndex: 0,tabBars: [{name: '设备信息',id: 'equipment'}, {name: '专家信息',id: 'expert'}, {name: '故障信息',id: 'fault'}, {name: '缺陷信息',id: 'defect'}, {name: '报废信息',id: 'scrap'}],}},methods: {checkIndex(index) {this.navIndex = index;console.log(index)},scroll: function(e) {console.log(e)this.old.scrollTop = e.detail.scrollTop},//滑动切换swipertabChange(e) {const navIndex = e.detail.currentthis.navIndex = navIndex},}}
</script><style scoped>.activite {color: #04c9c3;}.content {height: 700px;background-color: #04C9C3;color: #fff;}.scroll-view_H {white-space: nowrap;width: 100%;color: #CCCCCC;}.scroll-view-item_H {display: inline-block;width: 20%;height: 50rpx;line-height: 50rpx;text-align: center;padding: 10px 0;font-size: 32rpx;}
</style>