wx 小程序自定义底部栏

近期使用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>