<template>
|
<view>
|
<view class="tabBar_css">
|
<u-tabbar
|
:value="currentPagePath"
|
:fixed="false"
|
:placeholder="false"
|
:safeAreaInsetBottom="false"
|
activeColor="#0f7ff9"
|
>
|
<u-tabbar-item v-for="(item, index) in tabBarList"
|
:key="index"
|
:text="item.text"
|
:name="item.pagePath"
|
@click="click_page"
|
:class="{active: currentPagePath == item.pagePath}">
|
<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
|
<image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
|
</u-tabbar-item>
|
</u-tabbar>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {mapGetters} from 'vuex'
|
import store from '@/store/index.js'
|
export default {
|
name:"tabBar",
|
props: {
|
currentPagePath: String,
|
tabBarList: {
|
default: function() {
|
return uni.getStorageSync('tabBarList')
|
}
|
},
|
},
|
data() {
|
return {
|
}
|
},
|
mounted(){
|
|
},
|
methods: {
|
click_page(item){
|
let page = '/' + item;
|
console.log("跳转",item)
|
uni.reLaunch({
|
url: page
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.tabBar_css{
|
position: fixed;
|
bottom: 10px;
|
left: 50%;
|
transform: translateX(-50%);
|
z-index: 9999;
|
width: calc(100vw - 20px);
|
border-radius: 99px;
|
overflow: hidden;
|
box-shadow: 0 -6px 10px rgba(150, 150, 150, 0.1), 0 6px 10px rgba(150, 150, 150, 0.1);
|
|
/deep/ .u-tabbar__content{
|
background-color: rgba(255,255,255,.4);
|
backdrop-filter: blur(5px);
|
-webkit-backdrop-filter: blur(5px);
|
border: 1px solid rgba(255,255,255,.8);
|
}
|
|
/deep/ .u-tabbar .u-border-top{
|
border-color: rgba(0,0,0,0) !important;
|
}
|
}
|
.u-page__item__slot-icon{
|
width: 20px;
|
height: 20px;
|
}
|
/deep/ .u-tabbar-item__text{
|
margin-top: 0 !important;
|
line-height: 20px !important;
|
}
|
|
.active{
|
/deep/ .u-tabbar-item__text{
|
|
}
|
}
|
</style>
|
