第一步：配置好需要作为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>