uni-app 实现自定义底部导航

原博:https://juejin.cn/post/7365533404790341651

在开发微信小程序,通常会使用uniapp自带的tabBar实现底部图标和导航,但现实有少量应用使用uniapp自带的tabBar无法满足需求,这时需要自定义底部tabBar功能。 例如下图的需求,在中间添加一个加号,例如根据不同登录的角色显示不同的tabBar按钮等,这些功能在无法通过 uniapp自带的tabBar实现所以需要写相关组件逻辑。

uni-app 实现自定义底部导航_第1张图片

常规tabBar

常规实现底部导航的效果,可以参考官方文档 uniapp添加tabBar官方文档地址: uniapp.dcloud.net.cn/collocation…

下面将下图为示例写部分代码案例: 在pages.json写上tabBar 并在List定义好每个页面与页面展示图标,以及不同选中时图标的效果,就可以实现下面页面展示的样式:

uni-app 实现自定义底部导航_第2张图片

 案例代码: 注意导航页的图标和页面都必须在根路径下面,因此不能使用网络地址,或分包下的图片和页面。

 "tabBar": {
      "color": "#bababa",
      "selectedColor": "#000000",
      "borderStyle": "black",
      "backgroundColor": "#ffffff",
      "list": [
          {
              "pagePath": "pages/tabbar/index/index",
              "iconPath": "static/images/common/shouye.png",
              "selectedIconPath": "static/images/common/shouye-xz.png",
              "text": "首页"
          },
          {
              "pagePath": "pages/talent/index",
              "iconPath": "static/images/common/task.png",
              "selectedIconPath": "static/images/common/task_d.png",
              "text": "达人任务"
          },
          {
              "pagePath": "pages/tabbar/facilitator/facilitator",
              "iconPath": "static/images/common/facilitator.png",
              "selectedIconPath": "static/images/common/facilitator_d.png",
              "text": "服务商"
          },
          {
              "pagePath": "pages/aiTools/aiTools",
              "iconPath": "static/images/common/aitools.png",
              "selectedIconPath": "static/images/common/aitools_d.png",
              "text": "创作助手"
          },
          {
              "pagePath": "pages/tabbar/info/info",
              "iconPath": "static/images/common/info.png",
              "selectedIconPath": "static/images/common/info_d.png",
              "text": "我的"
          }
      ]
     },

自定义tabBar

梳理业务:

  1. 去除pages.json写上tabBar注释相关代码;
  2. 通过uni.hideTabBar();隐藏uniapp自带的tabBar;
  3. 自定义tabBar组件,实现页面相关逻辑;
  4. 在相关页面引入该组件;
  5. 根据在页面的onShow方法,当页面显示通过$ref,调用相关逻辑,判断需要显示的底部tabBar按钮和样式。

下面将以下图为案例写相关逻辑:

uni-app 实现自定义底部导航_第3张图片

  1. 去除pages.json写上tabBar注释相关代码,图上写了一个list.pagePath 主要的作用是占位,没别的意义

uni-app 实现自定义底部导航_第4张图片

2.封装tabBar.vue组件

ps:我在components\tabbar\tabbar.vue路径下封装tabBar.vue组件,其他的小伙伴可以根据自己的页面需求写在对应位置,例如想实现首页点击进入不同的分包和页面展示不同的tabBar,那么可以根据自己的需求进行调整。






  1. 组件封装完毕需要在对应的页面中引入该组件 例如 下面index.vue
  2. 
    	
                    //current则表示选中的状态,例如当前是首页则current为0,如果是第三页则current=2
    		
    	
    
    
    
                        
                        

你可能感兴趣的:(uni-app)