微信小程序tabBar的基本设置

JAY.LIN 收录于微信小程序

2025-01-24 约 568 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=97769618

微信小程序tabBar的基本设置

app.json

当我们想要在小程序中实现下面的效果的时候，可以使用tabBar

从图片中可以看到tab的结构：

1、3个可选的tab：

list: 使用tabBar对象中的list对象数组属性来控制，list数组中的每个元素（对象）,

{
    "pages": [
        "pages/index/index",
        "pages/publish/index",
        "pages/user/index"
    ],
    "tabBar": {
        "color": "#dddddd",
        "selectedColor": "#16f2e7",
        "backgroundColor": "#fff",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "找房",
                "iconPath": "static/image/icon_home_u.png",
                "selectedIconPath": "static/image/icon_home_a.png"
            },
            {
                "pagePath": "pages/publish/index",
                "text": "发布房源",
                "iconPath": "static/image/icon_release_u.png",
                "selectedIconPath": "static/image/icon_release_a.png"
            },
            {
                "pagePath": "pages/user/index",
                "text": "我的",
                "selectedIconPath": "static/image/icon_user_a.png",
                "iconPath": "static/image/icon_user_u.png"
            }
        ]
    },
    "component": true,
    "usingComponents": {}
}

2.选项底部文案：

text： 可以用来描述选项卡文案

3、当选中的时候icon动态发生变化：

iconPath： 未选中时默认的icon图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px

selectedIconPat： 选中后更换的icon图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px

4、字体选中、未选中的时候动态变化：

color： 默认的tab字体颜色

selectedColor： 选中后的字体颜色

5、选中不同的tab切换不同的页面：

pagePath： 页面路径

6.tabBar上边框的颜色：

borderStyle： 仅支持black、white，默认black

7.tabBar背景颜色： backgroundColor

color、selectedColor、backgroundColor： 仅支持16六进制的颜色表示方法，如（#ffffff）

目录

微信小程序tabBar的基本设置

微信小程序tabBar的基本设置