版權(quán)聲明：本文為博主原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/weixin_42560017/article/details/100356238
1.在app.vue中引入全局樣式：
<style>
/*每個(gè)頁面公共css */
@import './common/uni.css';
/*引入css3動(dòng)畫庫*/
@import './common/animate.css';
</style>
2.在項(xiàng)目根目錄components文件夾下新建一個(gè)vue文件
這里我命名為index.vue,文件內(nèi)容如下:
<template>
<view>
<!--頂部導(dǎo)航欄-->
<view class="uni-tab-bar">
<scroll-view scroll-x class="uni-swiper-tab">
<block v-for="(tabBar,index) in tabBars" :key="index">
<view class="swiper-tab-list" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
{{tabBar.name}}
<view class="swiper-tab-line">
</view>
</view>
</block>
</scroll-view>
</view>
<!--內(nèi)容區(qū)-->
<view class="uni-tab-bar">
<swiper :current="tabIndex" @change="tabChange">
<swiper-item v-for="(content,index) in contentList" :key="index" >
<view class="swiper-item">{{content}}</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabIndex: 0, //選中標(biāo)簽欄的序列
contentList: [
"關(guān)注",
"推薦",
"熱點(diǎn)",
"體育",
'財(cái)經(jīng)',
'娛樂',
],
tabBars:[
{
name: '關(guān)注',
id: 'guanzhu'
},
{
name: '推薦',
id: 'tuijian'
},
{
name: '熱點(diǎn)',
id: 'redian'
},
{
name: '體育',
id: 'tiyu'
},
{
name: '財(cái)經(jīng)',
id: 'caijing'
},
{
name: '娛樂',
id: 'yule'
}
],
swiperHeight: 0
}
},
components:{
},
onLoad() {
},
methods: {
toggleTab(index){
console.log(index)
this.tabIndex = index
},
//滑動(dòng)切換swiper
tabChange(e){
console.log(e.detail)
const tabIndex = e.detail.current
this.tabIndex = tabIndex
}
}
}
</script>
<style>
.swiper-tab-list{
color: #969696;
font-weight: bold;
}
.uni-tab-bar .active{
color: #343434;
}
.active .swiper-tab-line{
border-bottom: 6upx solid #FEDE33;
width: 70upx;
margin: auto;
border-top: 6upx solid #FEDE33;
border-radius: 20upx;
}
.uni-swiper-tab{
border-bottom: 1upx solid #eeeeee;
}
</style>
————————————————
版權(quán)聲明：本文為CSDN博主「weixin_42560017」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42560017/article/details/100356238
