uni-app顶部导航（可滑动）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42560017/article/details/100356238
1.在app.vue中引入全局样式：
<style>
/*每个页面公共css */
@import './common/uni.css';
/*引入css3动画库*/
@import './common/animate.css';
</style>
2.在项目根目录components文件夹下新建一个vue文件
这里我命名为index.vue,文件内容如下:
<template>
<view>
<!--顶部导航栏-->
<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>
<!--内容区-->
<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, //选中标签栏的序列
contentList: [
"关注",
"推荐",
"热点",
"体育",
'财经',
'娱乐',
],
tabBars:[
{
name: '关注',
id: 'guanzhu'
},
{
name: '推荐',
id: 'tuijian'
},
{
name: '热点',
id: 'redian'
},
{
name: '体育',
id: 'tiyu'
},
{
name: '财经',
id: 'caijing'
},
{
name: '娱乐',
id: 'yule'
}
],
swiperHeight: 0
}
},
components:{
},
onLoad() {
},
methods: {
toggleTab(index){
console.log(index)
this.tabIndex = index
},
//滑动切换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>
————————————————
版权声明：本文为CSDN博主「weixin_42560017」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42560017/article/details/100356238
