uni-app x 纯原生跨平台 APP 自定义 tabBar 底部导航栏

[xuxiaowei]

代码

• 登录 · 极狐GitLab

实现步骤

1. 新建一个页面 me
   
   
   • 使用 空白页面模版（组合式）
   • 勾选 在pages.json中注册
     
     
     
     修改 script 使用 lang="uts"
     
     
     
     在pages.json中注册的效果
     
     
2. 添加的底部导航栏

   {
     "tabBar": {
       "color": "#7A7E83",
       "selectedColor": "#2979ff",
       "backgroundColor": "#FFFFFF",
       "borderStyle": "black",
       "list": [
         {
           "pagePath": "pages/index/index",
           "text": "首页",
           "iconPath": "/static/home.png",
           "selectedIconPath": "/static/home-fill.png"
         },
         {
           "pagePath": "pages/me/me",
           "text": "我的",
           "iconPath": "/static/user.png",
           "selectedIconPath": "/static/user-fill.png"
         }
       ]
     }
   }
   

   添加的位置与效果
   
   
3. 不同 tabBar 点击的效果