uView框架 https://www.uviewui.com/components/tabbar.html
首先 需要使用自定義底部導(dǎo)航的頁面里添加組件名
這個valueModel是你點擊的是哪個底部導(dǎo)航，為了高亮并且傳給自定義底部導(dǎo)航組件
然后是底部導(dǎo)航的組件
直接代碼全復(fù)制,我的數(shù)據(jù)時從vuex里讀取的，具體可以看情況獲取
<template>
<u-tabbar :value="valueModel" :fixed="true" @change="changeRouter" :placeholder="true" z-index='9999'
:safeAreaInsetBottom="true">
<u-tabbar-item :badge="index==0?'3':null" :text="item.text" :icon="item.iconPath"
v-for="(item,index) in vuex_tabbar" :key='index'></u-tabbar-item>
</u-tabbar>
</template>
<script>
import {
mapState
} from 'vuex' //引入mapGetters
export default {
name: "u-tabbar-own",
data() {
return {};
},
props: {
valueModel: {
type: Number,
default: 0
}
},
created() {
// 是否隱藏原生tabbar
uni.hideTabBar();
},
mounted() {
},
computed: {
...mapState({
vuex_tabbar: state => state.vuex_tabbar,
})
},
methods: {
changeRouter(e) {
if (e == 0) {
if (this.$store.state.vuex_tabbar[0].text == '待辦') {
uni.switchTab({
url: `/pages/backlog/backlog`
});
} else {
uni.setTabBarItem({
index: 0,
text: "",
selectedIconPath: '/pages/fieldStatistics/fieldStatistics'
})
uni.switchTab({
url: `/pages/fieldStatistics/fieldStatistics`
});
}
} else if (e == 1) {
uni.switchTab({
url: `/pages/client/client`
});
} else if (e == 2) {
uni.switchTab({
url: `/pages/workbench/workbench`
});
} else if (e == 3) {
uni.switchTab({
url: `/pages/resource/resource`
});
} else if (e == 4) {
uni.switchTab({
url: `/pages/my/my`
});
}
},
}
}
</script>
<style lang="scss" scoped>
.f-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}
</style>
