uni-app之tabBar的自己配置 _Uni-App

休言女子非英物，夜夜龙泉壁上鸣。这篇文章主要讲述uni-app之tabBar的自己配置相关的知识，希望能为你提供帮助。
1.因为产品相关的的权限，需要配置不同的导航，这时候需要自定义导航。分离出来的就是一个小的组件。（tabBar.vue）
此处暂时用的html插入的代码，能粘贴到vue文件即可。

< template> < view class="tabBar"> < view v-for="(item,index) in tabBar" :key="item.url" class="tabbar_item" :class="{\'active\':item.url == currentPage}" @click="navTo(item,index)"> < image v-if="item.url == currentPage" :src="https://www.songbingjia.com/android/item.imgClick" mode=""> < /image> < image v-else :src="https://www.songbingjia.com/android/item.imgNormal" mode=""> < /image> < view class="text"> {{item.text}}< /view> < /view> < /view> < /template>

< script> export default { props: { currentPage: { type: String, default: \'index\' } }, data() { return { tabBar: [{ url: \'information\', text: \'消息\', imgNormal:\'../../static/images/information.png\', imgClick:\'../../static/images/active/information_active.png\' }, { url: \'officialPartner\', text: \'合作商\', imgNormal:\'../../static/images/officialPartner.png\', imgClick:\'../../static/images/active/offPartner_active.png\' }, { url: \'stock\', text: \'库存\', imgNormal:\'../../static/images/stock.png\', imgClick:\'../../static/images/active/stock_active.png\' }, { url: \'product\', text: \'产品\', imgNormal:\'../../static/images/product.png\', imgClick:\'../../static/images/active/product_active.png\' }, { url: \'mine\', text: \'我的\', imgNormal:\'../../static/images/mine.png\', imgClick:\'../../static/images/active/mine_active.png\' } ], level:\'\'}; },mounted(){ let userlevel = uni.getStorageSync(\'level\'); /* console.log(userlevel); */ let _this = this; if (userlevel== 1) { _this.tabBar.splice(3, 1); } else { _this.tabBar.splice(1,1); _this.tabBar.splice(1,1); } }, created() { uni.hideTabBar({}) }, computed: {}, methods: { navTo(item,index) { let _this = this; if (item.url !== _this.currentPage) { var isUrl = `/pages/${item.url}/${item.url}` const that = this uni.switchTab({ url: isUrl }) } else { /* this.$parent.toTop() */ } } } } < /script>

< style lang="scss" scoped> //导航栏设置 $isRadius:20upx; //左上右上圆角 $isWidth:100vw; //导航栏宽度 $isBorder:1px solid #eeeeee; //边框不需要则设为0px $isBg:white; //背景 // 选中设置 $chooseTextColor:#1b60ac; //选中时字体颜色 $chooseBgColor:white; //选中时背景颜色 transparent为透明 //未选中设置 $normalTextColor:#999; //未选中颜色 .tabBar { width: $isWidth; height: 100upx; position: fixed; bottom: 10upx; left: 0; right: 0; margin: 0 auto; z-index: 998; background-color: $isBg; color: $normalTextColor; border-left: $isBorder; border-top: $isBorder; border-right: $isBorder; display: flex; justify-content: space-around; border-top-right-radius: $isRadius; border-top-left-radius: $isRadius; box-sizing: border-box; overflow: hidden; .tabbar_item { width: 25%; font-size: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; & .active { /* border-left: $isBorder; border-top: $isBorder; */ background: $chooseBgColor; color: $chooseTextColor; } }image { width: 36upx; height: 36upx; margin-left: 5upx; } } < /style>

2、页面引入。