uniapp自定义动态tabbar及全局挂载底部自定义组件

2023-02-05 06:17| 来源: 网络整理| 查看: 265

本篇文章解决的问题如下：

1：uniapp在pages.json中定义的tabbar，在非tabbar页面的时候不会显示，所以自定义了一个tabbar组件。（注意是自定义组件不是官方的custom-tab-bar组件）

2：有些tabbar需要动态变化，会员登陆前和会员登陆后可能会需要在tabbar上面展示不同的项目，所以要做到动态判断

3：uniapp所有页面底部都插入同一个组件（例如版权信息，或右侧悬浮的内容），每个页面都引入一次太过麻烦，所以在main.js里面挂载一次就可以所有页面使用。

一：自定义tabbar组件：（就不需要在pages.json里面再定义tabbar了）

{{item.text}} export default { props: { pagePath: null }, data() { return { page: 'contact', showPage: false, containerHeight: 400, tabbar: [ { "pagePath": "/pages/tabBar/home/home", "iconPath": "/static/tabBar/home.png", "selectedIconPath": "/static/tabBar/home_col.png", "text": "首页", "fontIcon": "icon-shouye" },　　　　　　　　　　　　// 这里是要动态切换的栏目，先隐藏，动态追加 // { // "pagePath": "/pages/tabBar/manage/manage", // "iconPath": "/static/tabBar/home.png", // "selectedIconPath": "/static/tabBar/home_col.png", // "text": "管理", // "fontIcon": "icon-guanli" // }, { "pagePath": "/pages/tabBar/person/person", "iconPath": "/static/tabBar/person.png", "selectedIconPath": "/static/tabBar/person_col.png", "text": "我的", "fontIcon": "icon-wode" } ] }; }, mounted() { // true为判断条件，根据实际的需求替换即可 if(true) { this.tabbar.splice(1,0, { "pagePath": "/pages/tabBar/manage/manage", "iconPath": "/static/tabBar/home.png", "selectedIconPath": "/static/tabBar/home_col.png", "text": "管理", "fontIcon": "icon-guanli" } ) } }, methods: { changeTab(item) { this.page = item.pagePath;　　　　　　　　　　// 这里使用reLaunch关闭所有的页面，打开新的栏目页面 uni.reLaunch({ url: this.page }); }, } } [nvue] uni-scroll-view, [nvue] uni-swiper-item, [nvue] uni-view { flex-direction: unset; } [nvue-dir-column] uni-swiper-item, [nvue-dir-column] uni-view { flex-direction: unset; } .uni-tabbar { position: fixed; bottom: 0; z-index: 999; width: 100%; display: flex; justify-content: space-around; height: 98upx; padding: 16upx 0; box-sizing: border-box; border-top: solid 1upx #ccc; background-color: #fff; box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32); .uni-tabbar__item { display: block; line-height: 24upx; font-size: 20upx; text-align: center; } .uni-tabbar__icon { height: 42upx; line-height: 42upx; text-align: center; } .icon { display: inline-block; } .uni-tabbar__label { line-height: 24upx; font-size: 24upx; color: #999; &.active { color: #1ca6ec; } } }

然后在各页面中使用组件即可

**注意修改代码中的页面路径**

**注意使用字体图标的话需要先在APP.Vue中引入iconfont.css**

**传入的路径用于当前项目高亮**

二：全局挂载自定义组件（在main.js中）

import Vue from 'vue' Vue.prototype.baseUrl = tools.baseUrl Vue.config.productionTip = false import tabBar from "@/components/tabbar/tabbar.vue" Vue.component('tabBar', tabBar) import Aside from "@/components/aside/aside.vue" Vue.component('Aside', Aside)

**注意要放在import Vue之后才行**

然后在各个页面中无须再import，也无须再components注册，直接就可以用了。

【本文地址】

公司简介

联系我们