uniapp自界说tabbar

第一步：设置好必要作为tabbar页面的路径，并将custom属性设置为true，

第二部：tabbar组件的封装
<template>
<view class="tabbar">
<view class="item" v-for="(item,index) in list" :key="index" @click="goNav(item.pagePath,index)">
                <view class="flex h-column h-center">
                    <image :src="current==index?item.selectedIconPath:item.iconPath"></image>
                    <view class="name" :class="current==index?'name-select':''">
                        {{item.text}}
                    </view>
                </view>
            </view>
</view>
</template>
<script>
export default{
props: ['current'],
data(){
return{
list: [{
                        iconPath: "../../../static/meijia/icon_navhome.png",
                        selectedIconPath: "../../../static/meijia/icon_navh_home.png",
                        text: '首页',
                        pagePath: '/pages/index/index',
                    },
                    {
                        iconPath: "../../../static/meijia/icon_navmy.png",
                        selectedIconPath: "../../../static/meijia/icon_navh_my.png",
                        text: '我的',
                        pagePath: '/pages/my/index',
                    },
                ]
}
},
methods:{
goNav(url,index) {
                uni.switchTab({
                    url: url
                })
            }
}
}
</script>
<style lang="scss" scoped>
.tabbar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: rgb(255, 255, 255);
        // border-top: 2rpx solid rgb(213, 215, 214);
        padding: 20rpx 50rpx;
        display: flex;
        justify-content: space-between;
        .item {
            display: flex;
            align-items: center;
            padding-bottom: 20rpx;
            image {
                width: 54rpx;
                height: 54rpx;
            }
            .name {
                color: rgb(151, 152, 154);
                font-size: 24rpx;
            }
            .name-select {
                color: #333;
                font-weight: bold;
            }
        }
    }
</style>

第三步：在组件中使用，current的值即当前页面在tabbar页面数组中的索引
<tabbar :current="0" ></tabbar>




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。