uview2.0自定义tabbar

tabbar组件

<template><u-tabbar :value="tab" @change="changeTab" :fixed="true" :border="true" :placeholder="true":safeAreaInsetBottom="true"><u-tabbar-item text="消息" icon="chat" badge="3"></u-tabbar-item><u-tabbar-item text=""><image style="width: 80rpx;height: 80rpx;" slot="active-icon" src="../static/wallet.png"></image><image style="width: 80rpx;height: 80rpx;" slot="inactive-icon" src="../static/wallet.png"></image></u-tabbar-item><u-tabbar-item text="设置" icon="setting"></u-tabbar-item></u-tabbar>
</template><script>export default {props: {tab: {type: Number,require: true},},data() {return {list: ["/pages/message/index", '/pages/home/index', "/pages/set/index"]}},methods: {changeTab(name) {console.log(88, name)uni.reLaunch({url: this.list[name]})},}}
</script><style scoped lang="scss">.status_bar {height: var(--status-bar-height);width: 100%;}
</style>

main.js全局组件注册

import tabbar from './components/tabbar.vue'
Vue.component('tabbar', tabbar)

主页面使用

• 在三个主页面分别引入组件
• 传入对于的索引即可

<!-- 自定义底部-->
<tabbar :tab="1"></tabbar>