自定义的tabbar页面代码
<template>
<view>
<view class="border_box">
<!-- <view class="tabBar_miden_border"></view> -->
</view>
<view class="tabbar">
<block v-for="(item, index) in tabBar.list">
<view class="tabbar-item" :class="item.pagePath==('/'+nowPath)?'tabBar_item2':''"
:style="{color:item.pagePath==('/'+nowPath)?tabBar.selectedColor:tabBar.color}"
@click="clickTab(item)">
<view :class="item.pagePath==('/'+nowPath)?'tabBar_miden_border':''">
<view class="tabbar-icon-bg"
:style="{'background-color':item.pagePath==('/'+nowPath)?tabBar.selectedbgColor:tabBar.bgcolor}">
<image class="tabbar-icon"
:src="item.pagePath==('/'+nowPath)? item.selectedIconPath : item.iconPath"></image>
</view>
<text class="tabbar-text" v-if="item.pagePath==('/'+nowPath)">{{ item.text }}</text>
</view>
</view>
</block>
</view>
</view>
</template>
<script>
export default {
name: 'tabBar',
data() {
return {
paddingBottomHeight: 0, //苹果X以上手机底部适配高度
tabBar: {
color: '#C1C0C9',
selectedColor: '#05B53A',
bgcolor: 'transparent',
selectedbgColor: '#07C540',
list: [{
pagePath: "/pages/Index/index",
showBig: false,
iconPath: '../../static/image/tabBar/bar1.png',
selectedIconPath: '../../static/image/tabBar/bar1_active.png',
text: '体育',
},
{
pagePath: "/pages/Coupon/index",
showBig: false,
iconPath: '../../static/image/tabBar/bar2.png',
selectedIconPath: '../../static/image/tabBar/bar2_active.png',
text: '活动',
},
{
pagePath: '/pages/Recreation/index',
showBig: false,
iconPath: '../../static/image/tabBar/bar3.png',
selectedIconPath: '../../static/image/tabBar/bar3_active.png',
text: '娱乐城',
},
{
pagePath: "/pages/TreasureChest/index",
showBig: false,
iconPath: '../../static/image/tabBar/bar4.png',
selectedIconPath: '../../static/image/tabBar/bar4_active.png',
text: '代理',
},
{
pagePath: "/pages/Me/index",
showBig: false,
iconPath: '../../static/image/tabBar/bar5.png',
selectedIconPath: '../../static/image/tabBar/bar5_active.png',
text: '我的',
}
]
}
}
},
created() {
let that = this;
uni.getSystemInfo({
success: function(res) {
let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
model.forEach(item => {
//适配iphoneX以上的底部,给tabbar一定高度的padding-bottom
if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
that.paddingBottomHeight = 40;
}
})
}
});
},
onReady() {
try {
uni.hideTabBar({
animation: false
})
} catch (e) {
//TODO handle the exception
}
},
mounted() {
try {
uni.hideTabBar({
animation: false
})
} catch (e) {
//TODO handle the exception
}
},
computed: {
nowPath() {
return getCurrentPages()[0] && getCurrentPages()[0].route;
},
},
methods: {
clickTab(item) {
uni.switchTab({
url: item.pagePath
})
}
}
}
</script>
0 个回复