You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

146 lines
3.8 KiB

<template>
<view :class="'tabbar_box ' + (isIphoneX?'iphoneX-height':'')" :style="'background-color:' + tabbar.backgroundColor">
<block v-for="(item, index) in tabbar.list" :key="index">
<navigator v-if="item.isSpecial == true" class="tabbar_nav" hover-class="none" :url="item.pagePath" :style="'color:' + tabbar.selectedColor" open-type="navigate">
<view class="special-wrapper"><image class="tabbar_icon" :src="item.iconPath"></image></view>
<image class="special-text-wrapper"></image>
<text>{{item.text}}</text>
</navigator>
<navigator v-else class="tabbar_nav" hover-class="none" :url="item.pagePath" :style="'color:' + (index == currentTabIndex ? tabbar.selectedColor : tabbar.color)" open-type="switchTab" @tap="switchTab(index)">
<image class="tabbar_icon" :src="index == currentTabIndex ? item.selectedIconPath : item.iconPath"></image>
<text>{{item.text}}</text>
</navigator>
</block>
</view>
</template>
<script>
// tabBarComponent/tabBar.js
const app = getApp();
export default {
data() {
return {
isIphoneX: app.globalData.isIphoneX,
tabbar:{
"backgroundColor": "#ffffff",
"color": "#979795",
"selectedColor": "#FF6F34",
"list": [{
"pagePath": "/pages/home/index",
"iconPath": "../static/tabbarComponent/icon/home.png",
"selectedIconPath": "../static/tabbarComponent/icon/home-a.png",
"text": "首页"
}, {
"pagePath": "/pages/demandHall/index",
"iconPath": "../static/tabbarComponent/icon/tab2.png",
"selectedIconPath": "../static/tabbarComponent/icon/tab2-a.png",
"text": "供需大厅"
}, {
"pagePath": "/pages/release/index",
"iconPath": "../static/tabbarComponent/icon/icon_release.png",
"isSpecial": true,
"text": "发布"
}, {
"pagePath": "/pages/life/index",
"iconPath": "../static/tabbarComponent/icon/tab3.png",
"selectedIconPath": "../static/tabbarComponent/icon/tab3-a.png",
"text": "生活"
}, {
"pagePath": "/pages/user/index",
"iconPath": "../static/tabbarComponent/icon/tab4.png",
"selectedIconPath": "../static/tabbarComponent/icon/tab4-a.png",
"text": "我的"
}]
},
currentTabIndex: this.current
};
},
components: {},
props: {
pagePath:{
type: String,
default:''
},
current: { type: [Number, String], default: 0 },
},
mounted() {
// console.log(this.pagePath)
},
methods: {
switchTab(index){
// console.log(index)
// this.currentTabIndex = index
this.$emit('click', index)
}
}
};
</script>
<style>
.tabbar_box{
display: flex;
flex-direction: row;
justify-content: space-around;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
height: 98rpx;
box-shadow: 0px -6rpx 12rpx rgba(0, 0, 0, 0.04);
}
.tabbar_box.iphoneX-height{
padding-bottom: 66rpx;
height: 170rpx;
}
.middle-wrapper{
position: absolute;
right: 50%;
margin-left: -60rpx;
bottom: 0;
background-color: #fff;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
/* border-top: 2rpx solid #f2f2f3; */
/* box-shadow: 0px -6rpx 12rpx rgba(0, 0, 0, 0.04); */
}
.middle-wrapper.iphoneX-height{
bottom: 66rpx;
}
.tabbar_nav{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 20rpx;
height: 100%;
position: relative;
}
.tabbar_icon{
width: 52rpx;
height: 52rpx;
}
.special-wrapper{
position: absolute;
top: -36rpx;
width: 96rpx;
height: 96rpx;
border-radius: 50%;
/* border-top: 2rpx solid #f2f2f3; */
box-shadow: 0px -6rpx 12rpx rgba(0, 0, 0, 0.04);
background-color: #fff;
text-align: center;
box-sizing: border-box;
padding: 6rpx;
}
.special-wrapper .tabbar_icon{
width: 84rpx;
height: 84rpx;
}
.special-text-wrapper{
width: 56rpx;
height: 56rpx;
}
</style>