先看看效果:
1.在app.vue中引入全局样式
<style>
/*每个页面公共css */
@import './common/uni.css';
/*引入css3动画库*/
@import './common/animate.css';
</style>
可以通过创建hello-uniapp项目,uni.css文件在项目的common文件夹下
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>
接下来可以在其他文件中导入使用了。