1.根目录下的static文件夹放入自定义图标
2.根目录下的components文件夹创建tabbar.vue(注意created要隐藏原生tabbar)
<template>
<view>
<u-tabbar :value="current?current:0" @change="changeTab" :fixed="true" :placeholder="false"
:safeAreaInsetBottom="true" :border="false">
<u-tabbar-item v-for="(item,index) in list" :key="index" :text="item.text">
<image class="u-page__item__slot-icon" slot="active-icon" :src="item.iconPath"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.selectedIconPath"></image>
</u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
export default {
name: "tabbar",
props: {
current: Number
},
created() {
//隐藏原生tabbar
uni.hideTabBar()
},
data() {
return {
list: [{
selectedIconPath: "../../static/images/tabbar/install.png",
iconPath: "../../static/images/tabbar/install-active.png",
text: '安装单',
customIcon: false,
pagePath: "pages/install/index"
},
{
selectedIconPath: "../../static/images/tabbar/repair.png",
iconPath: "../../static/images/tabbar/repair-active.png",
text: '维修单',
customIcon: false,
pagePath: "pages/repair/index"
},
{
selectedIconPath: "../../static/images/tabbar/my.png",
iconPath: "../../static/images/tabbar/my-active.png",
text: '我的',
customIcon: false,
pagePath: "pages/my/index"
}
],
}
},
methods: {
changeTab(e) {
console.log(e)
uni.switchTab({
url: '/' + this.list[e].pagePath,
})
}
}
}
</script>
<style scoped>
.u-page__item__slot-icon{
width: 20px!important;
height: 20px!important;
}
</style>
3.main.js全局引用自定义tabbar组件
import tabbar from './components/tabbar/tabbar'
Vue.use('tab-bar',tabbar)
4.配置pages.json
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "pages/install/index"
},
{
"pagePath": "pages/repair/index"
},
{
"pagePath": "pages/my/index"
}
]
}
5.在页面中使用
<template>
<view>
<tabbar :current="0"></tabbar>
</view>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>