微信小程序底部自定义tabBar

2024年4月12日 互联网

   一、最简单底部导航栏
   在 app.json 内配置(限制：菜单栏最多5个,样式、图片不好个性化设置)

 "tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","iconPath": "/assets/tabBar/icon_component.png","selectedIconPath": "/assets/tabBar/icon_component_HL.png","text": "首页"},{"pagePath": "pages/contact/index","iconPath": "/assets/tabBar/icon_API.png","selectedIconPath": "/assets/tabBar/icon_API_HL.png","text": "联系客服"}]}

二、自定义底部导航栏

1、在 app.json 内配置 (custom：最低适配版本2.5.0)

"tabBar": { // 虽然配置后并不生效，但是不能省"custom": true,    // 是否启用自定义底部导航栏"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","iconPath": "/assets/tabBar/icon_component.png","selectedIconPath": "/assets/tabBar/icon_component_HL.png","text": "首页"},{"pagePath": "pages/contact/index","iconPath": "/assets/tabBar/icon_API.png","selectedIconPath": "/assets/tabBar/icon_API_HL.png","text": "联系客服"}]
},"usingComponents": {  // 在 app.json 内开启全局配置"v-tabBar": "custom-tab-bar/index"
}

2、自定义 tabBar 组件   (文件夹名必须为custom-tab-bar，必须和pages在同一级目录；文件名必须为 index 命名)

custom-tab-bar 代码请参考：微信小程序api-自定义tabBar

　备注： list中的pagePath一定要写绝对路径/pages开头

3、在 pages 的 xxx.js 新增 onShow 方法

onShow: function() {if(typeof this.getTabBar === 'function' && this.getTabBar()){this.getTabBar().setData({selected: 1});}
}

参考：微信小程序自定义tabbar

          uni-app适配自定义tabBar

说明： 微信小程序自带 tabBar 可以在 <web-view> 标签上显示； 自定义 tabBar 无法在<web-view> 标签上显示【如果将 <view>标签改成<cover-view>标签,则可以在<web-view> 标签上显示，但是tabBar会出现页面加载时无法固定显示在底部的问题】

        

          

最新文章