93 lines
2.0 KiB
Vue
93 lines
2.0 KiB
Vue
<template>
|
|
<view class="tabbar-list border-box pad-sx40 background-white pad-zy20 flex">
|
|
<!-- 底部导航 -->
|
|
<view class="tabbar-item color-88 flex" :class="current==index ? 'active' : ''" @tap="chooseFootTab(index)" v-for="(item,index) in footBarList" :key="index">
|
|
<view class="icon flex"><image class="img" :style="{width:[41,38][index]+'rpx',height:[41,40][index]+'rpx'}" :src="item.iconPath" mode="widthFix"></image></view>
|
|
<view class="title font26">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { mapState } from 'vuex'; //引入mapState
|
|
export default {
|
|
name:'tabbar',
|
|
props:{
|
|
// 当前选中项
|
|
current:{
|
|
type:Number,
|
|
default:0
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
footBarList:[
|
|
{iconPath:'/static/icon-idle.png',title:'闲置'},
|
|
{iconPath:'/static/icon-my.png',title:'我的'}
|
|
], //底部列表
|
|
};
|
|
},
|
|
mounted() {
|
|
// 获取当前页面路径
|
|
this.$toolAll.tools.obtainPagePath();
|
|
},
|
|
methods:{
|
|
// 跳转tabbar
|
|
chooseFootTab(index){
|
|
switch (index){
|
|
case 0:
|
|
uni.reLaunch({
|
|
url:'/pages/idle/idle',
|
|
})
|
|
break;
|
|
case 1:
|
|
if(this.$toolAll.tools.judgeAuth()) {
|
|
uni.reLaunch({
|
|
url:'/pages/my/my',
|
|
})
|
|
}
|
|
break;
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tabbar-list{
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
}
|
|
.tabbar-item{
|
|
flex-wrap: wrap;
|
|
justify-items: center;
|
|
width: 25%;
|
|
text-align: center;
|
|
}
|
|
.tabbar-item .icon{
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 40rpx;
|
|
}
|
|
.tabbar-item .icon .img{
|
|
filter: grayscale(100%);
|
|
}
|
|
.tabbar-item .title{
|
|
width: 100%;
|
|
margin-top: 6rpx;
|
|
line-height: 1.2;
|
|
}
|
|
.tabbar-item.active{
|
|
color: #1981ff;
|
|
}
|
|
.tabbar-item.active .icon .img{
|
|
filter: grayscale(0);
|
|
}
|
|
</style>
|