微信小程序-tabBar底部菜单

简介: 微信小程序-tabBar底部菜单

tabBar


文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

tabBar就是小程序底部的导航菜单,小程序的tabBar使用比较简单,只需要在全局配置文件app.json中加上下面的配置即可,参考代码如下:

{
    "tabBar": {
        "color": "color",
        "selectedColor": "selectedColor",
        "list": [
          {
            "pagePath": "pagePath",
            "iconPath": "iconPath",
            "selectedIconPath": "selectedIconPath",
            "text": "text"
          },
          {
            "pagePath": "pagePath",
            "iconPath": "iconPath",
            "selectedIconPath": "selectedIconPath",
            "text": "text"
          },
        ]
    }
}


参考配置实例:

{
    "tabBar": {
        "color": "#C0C0C0",
        "selectedColor": "#000000",
        "backgroundColor": "#FFFFFF",
        "list": [
            {
                "pagePath": "pages/include/include",
                "text": "导入",
                "iconPath": "./assets/images/more.png",
                "selectedIconPath": "./assets/images/more-active.png"
            },
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "./assets/images/cookbook.png",
                "selectedIconPath": "./assets/images/cookbook-active.png"
            }
        ]
    }
}


注意点:

  • pages数组中的默认页面(第一个元素)一定要出现在tabbar配置的list数组中,如果没有则底部菜单是不显示的;
  • 如果默认页面在菜单的list数组中,但是不是list数组的一个元素,那么默认页面在第一个元素,那个菜单就会被默认选中;
  • 正常来讲,pages中list数组中的第一个元素(页面),即菜单list数组中的第一个栏目,要与默认页一致;


微信小程序默认提供了,底部导航菜单栏的配置方式。使用app.json配置tabBar实现即可。

注意:

1、tabbar路径的page页面必须路径正确存在

2、显示选中和未选中的图片路径正确存在

3、切换到的页面是tab页面,才可以显示出底部导航菜单

目录
相关文章
|
7月前
|
JSON 小程序 数据格式
微信小程序的tabbar怎么配置
微信小程序的tabbar怎么配置
510 2
|
8月前
|
小程序 开发工具 git
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
|
3月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
785 1
|
5月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
214 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
7月前
|
JSON 小程序 搜索推荐
微信小程序如何自定义tabbar
微信小程序如何自定义tabbar
99 3
|
6月前
|
小程序 JavaScript
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
202 0
|
7月前
|
JSON Java API
个人作品-微信服务号菜单管理神器
个人作品-微信服务号菜单管理神器
47 0
|
8月前
|
JSON 小程序 前端开发
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
|
17天前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
1天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
5 0

热门文章

最新文章