近期使用uniapp进行wx小程序开发,在实现页面跳转至tab页时,出现底部栏无法加载显示问题,故实现自定义底部栏,做此记录。
效果图:
代码实现:
tab.vue
<template>
<view class="tarbar">
<view
class=".tarbar"
:style="{ background: tabBar.backgroundColor, color: tabBar.color, 'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0 }" >
<view class="tarbar-ul">
<view class="tarbar-li" v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)">
<block>
<view class="tarbar-li-icon">
<image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image>
</view>
<view class="tarbar-li-name">
<text :class="selected == index ? 'icon_color' : ''">{{ item.text }}</text>
</view>
</block>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: ['selected'],
data() {
return {
tabBar: {
color: '#e0e0e0',
selectedColor: '#6a7af7',
borderStyle: '#e0e0e0',
backgroundColor: '#fff',
position: 'bottom',
list: [
{
pagePath: '/pages/home_pages/home_page/home_page',
iconPath: '/static/tabBar_icon/home_nomol.png',
selectedIconPath: '/static/tabBar_icon/home_nomol_active.png',
text: '首页'
},
{
pagePath: '/pages/discounts_pages/discounts_pages_index/discounts_pages_index',
iconPath: '/static/tabBar_icon/discount_nomol.png',
selectedIconPath: '/static/tabBar_icon/discount_nomol_active.png',
text: '优惠'
},
{
pagePath: '/pages/my_pages/my_pages_index/my_pages_index',
iconPath: '/static/tabBar_icon/my_nomol.png',
selectedIconPath: '/static/tabBar_icon/my_nomol_active.png',
text: '我的'
}
]
}
};
},
created(){
console.log(123)
console.log(this.$store.state.skin.backgroundColor,'colors')
// 换肤,设置底部栏背景色
this.tabBar.backgroundColor = this.$store.state.skin.backgroundColor
},
onLoad() {},
methods: {
setSelected(index) {
console.log(index);
uni.switchTab({
url: this.tabBar.list[index].pagePath
});
this.$forceUpdate();
}
}
};
</script>
<style>
.tarbar {
width: 100%;
z-index: 9999;
position: fixed;
}
.tarbar {
width: 100%;
height: 125upx;
background: #4d586f;
position: fixed;
left: 0;
bottom: 0;
}
.tarbar-ul {
width: 100%;
height: 100%;
padding: 5upx 60upx 15upx;
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
.tarbar-li {
width: 80upx;
height: 80upx;
}
.tarbar-li-icon {
width: 50upx;
height: 50upx;
margin: 0 auto;
}
.tarbar-li-icon image {
width: 50upx;
height: 50upx;
}
.tarbar-li-name {
width: 100%;
text-align: center;
line-height: 30upx;
font-size: 24upx;
height: 30upx;
}
.icon_color{
color: #fff;
}
</style>
page.json设置"custom": true,自定义底部栏
组件引用:
import tarbar from '@/components/tab.vue';
components: {
'tarbar': tarbar
},
<tarbar :selected="0"></tarbar>