1. uniapp tab组件
1.1. 直接拆开使用
javascript
复制代码
<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>
javascript
复制代码
<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>
javascript
复制代码
<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
},
//滑动切换swiper
tabChange(e) {
const navIndex = e.detail.current
this.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>