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
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> |