263 lines
6.4 KiB
Vue
263 lines
6.4 KiB
Vue
<template>
|
||
<view class="uni-tabbar">
|
||
<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)"
|
||
:class="item.centerItem ? ' center-item' : '' " >
|
||
<!-- <view class="icon" :class="[item.fontIcon , item.pagePath == pagePath?'uni-active':'']"></view> -->
|
||
<!-- 上面使用的是字体图标，解决切换页面的时候图标会闪的效果，毕竟每切换一个页面都会闪一下不太好看，可以切换使用下面的图片方式 -->
|
||
<view class="uni-tabbar__bd">
|
||
<view class="uni-tabbar__icon">
|
||
<image v-if="item.pagePath == pagePath" :class="item.text=='首页'?'w56':''" class="uni-w-42 uni-h-42"
|
||
:mode="'scaleToFill'" :src="item.selectedIconPath"></image>
|
||
<image v-else class="uni-w-42 uni-h-42" :mode="'scaleToFill'" :src="item.iconPath"></image>
|
||
</view>
|
||
</view>
|
||
<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
|
||
{{item.text}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
pagePath: null
|
||
},
|
||
data() {
|
||
return {
|
||
page: "pages/homepage/index",
|
||
showPage: false,
|
||
containerHeight: 400,
|
||
tabbar: [{
|
||
"pagePath": "pages/home/index",
|
||
"iconPath": "/static/images/t_homepage.png",
|
||
"selectedIconPath": "/static/images/homepage.png",
|
||
"text": "首页",
|
||
"centerItem": false
|
||
},
|
||
{
|
||
"pagePath": "pages/index/index",
|
||
"iconPath": "/static/images/t_home.png",
|
||
"selectedIconPath": "/static/images/t_home_sc.png",
|
||
"text": "资讯",
|
||
"centerItem": false
|
||
},
|
||
{
|
||
"pagePath": "pages/bluntShut/index",
|
||
"iconPath": "/static/images/blunt_sc.png",
|
||
"selectedIconPath": "/static/images/blunt_sc.png",
|
||
"text": "冲关",
|
||
"centerItem": true
|
||
}, {
|
||
"pagePath": "pages/class/attentClass/index",
|
||
"iconPath": "/static/images/t_class.png",
|
||
"selectedIconPath": "/static/images/t_class_sc.png",
|
||
"text": "上课",
|
||
"centerItem": false
|
||
},
|
||
{
|
||
"pagePath": "pages/my/index",
|
||
"iconPath": "/static/images/t_my.png",
|
||
"selectedIconPath": "/static/images/t_my_sc.png",
|
||
"text": "我的",
|
||
"centerItem": false
|
||
}
|
||
]
|
||
}
|
||
},
|
||
mounted() {
|
||
let userType = uni.getStorageSync('userInfo').userType;
|
||
if (userType == 3) {
|
||
this.tabbar = [{
|
||
"pagePath": "pages/homepage/index",
|
||
"iconPath": "/static/images/t_homepage.png",
|
||
"selectedIconPath": "/static/images/homepage.png",
|
||
"text": "首页",
|
||
"centerItem": false
|
||
},
|
||
{
|
||
"pagePath": "pages/index/index",
|
||
"iconPath": "/static/images/t_home.png",
|
||
"selectedIconPath": "/static/images/t_home_sc.png",
|
||
"text": "资讯",
|
||
"centerItem": false
|
||
},
|
||
{
|
||
"pagePath": "pages/teach/index",
|
||
"iconPath": "/static/images/t_teach.png",
|
||
"selectedIconPath": "/static/images/t_teach.png",
|
||
"text": "教学",
|
||
"centerItem": true
|
||
}, {
|
||
"pagePath": "pages/correct/index",
|
||
"iconPath": "/static/images/t_correct.png",
|
||
"selectedIconPath": "/static/images/t_correct_sc.png",
|
||
"text": "批改",
|
||
"centerItem": false
|
||
},
|
||
{
|
||
"pagePath": "pages/my/index",
|
||
"iconPath": "/static/images/t_my.png",
|
||
"selectedIconPath": "/static/images/t_my_sc.png",
|
||
"text": "我的",
|
||
"centerItem": false
|
||
}
|
||
]
|
||
} else {
|
||
this.tabbar = [{
|
||
"pagePath": "pages/homepage/index",
|
||
"iconPath": "/static/images/t_homepage.png",
|
||
"selectedIconPath": "/static/images/homepage.png",
|
||
"text": "首页",
|
||
"centerItem": false
|
||
},
|
||
{
|
||
"pagePath": "pages/index/index",
|
||
"iconPath": "/static/images/t_home.png",
|
||
"selectedIconPath": "/static/images/t_home_sc.png",
|
||
"text": "资讯",
|
||
"centerItem": false
|
||
},
|
||
{
|
||
"pagePath": "pages/bluntShut/index",
|
||
"iconPath": "/static/images/blunt_sc.png",
|
||
"selectedIconPath": "/static/images/blunt_sc.png",
|
||
"text": "冲关",
|
||
"centerItem": true
|
||
}, {
|
||
"pagePath": "pages/class/attentClass/index",
|
||
"iconPath": "/static/images/t_class.png",
|
||
"selectedIconPath": "/static/images/t_class_sc.png",
|
||
"text": "上课",
|
||
"centerItem": false
|
||
},
|
||
{
|
||
"pagePath": "pages/my/index",
|
||
"iconPath": "/static/images/t_my.png",
|
||
"selectedIconPath": "/static/images/t_my_sc.png",
|
||
"text": "我的",
|
||
"centerItem": false
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
changeTab(item) {
|
||
this.page = item.pagePath;
|
||
// 这里使用reLaunch关闭所有的页面，打开新的栏目页面
|
||
uni.reLaunch({
|
||
url: `/${this.page}`
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
[nvue] uni-scroll-view,
|
||
[nvue] uni-swiper-item,
|
||
[nvue] uni-view {
|
||
flex-direction: unset;
|
||
}
|
||
|
||
[nvue-dir-column] uni-swiper-item,
|
||
[nvue-dir-column] uni-view {
|
||
flex-direction: unset;
|
||
}
|
||
|
||
.uni-tabbar {
|
||
position: fixed;
|
||
display: flex;
|
||
bottom: 0;
|
||
// bottom: 176px;
|
||
z-index: 999;
|
||
width: 100%;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
height: 104rpx;
|
||
background: #FFFFFF;
|
||
// border-top: solid 1rpx #e5e5e5;
|
||
box-sizing: border-box;
|
||
|
||
.uni-tabbar__item {
|
||
display: block;
|
||
line-height: 24rpx;
|
||
font-size: 22rpx;
|
||
text-align: center;
|
||
}
|
||
.center-item{
|
||
display: block;
|
||
position: relative;
|
||
|
||
.uni-tabbar__bd {
|
||
background-color: #C4C6CF;
|
||
border-radius: 50%;
|
||
padding: 10rpx;
|
||
position: absolute;
|
||
top: -100rpx;
|
||
left: calc(50% - 50rpx);
|
||
border-radius: 50%;
|
||
// box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16);
|
||
/* box-shadow: 0 0 5px #999; */
|
||
background-color: #ffffff;
|
||
|
||
.uni-tabbar__icon {
|
||
height: 80rpx;
|
||
width: 80rpx;
|
||
text-align: center;
|
||
|
||
image {
|
||
height: 80rpx;
|
||
width: 80rpx;
|
||
}
|
||
|
||
.w56 {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
margin-top: 0rpx;
|
||
}
|
||
}
|
||
}
|
||
.uni-tabbar__label{
|
||
position: absolute;
|
||
width:100rpx;
|
||
top: 20rpx;
|
||
left: calc(50% - 50rpx);
|
||
}
|
||
}
|
||
.uni-tabbar__bd {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 8rpx;
|
||
|
||
.uni-tabbar__icon {
|
||
height: 54rpx;
|
||
width: 54rpx;
|
||
text-align: center;
|
||
|
||
image {
|
||
height: 54rpx;
|
||
width: 54rpx;
|
||
}
|
||
|
||
.w56 {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
margin-top: 0rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.uni-tabbar__label {
|
||
font-size: 22rpx;
|
||
color: #60646E;
|
||
|
||
&.active {
|
||
color: #FDCB08;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|