uView框架 https://www.uviewui.com/components/tabbar.html
首先 需要使用自定义底部导航的页面里添加组件名
这个valueModel是你点击的是哪个底部导航，为了高亮并且传给自定义底部导航组件
然后是底部导航的组件
直接代码全复制,我的数据时从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>
