小程序全局配置-tabBar
轻栈insarea
轻栈insarea微头条
2023-07-31

tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:

- 底部tabBar
- 顶部tabBar

Ps.tabBar中智能配置最少2个、最多5个tab页签;当渲染顶部tabBar时,不显示icon,只显示文本。

1690788411358009491.jpg




了解tabBar的6个组成部分,才能更好地进行设置:
-backgroundColor: tabBar 的背景色
-selectedlconPath: 选中时的图片路径
-borderStyle: tabBar 上边框的颜色
-iconPath: 未选中时的图片路径
-selectedColor: tab 上的文字选中时的颜色
-color: tab 上文字的默认(未选中)颜色

1690788412782079067.jpg




配置底部tabBar,在app.json中输入内容
"tabBar": {
 "list": [
    {
      "pagePath":"pages/index/index",
      "text":"index"
    },
    {
      "pagePath": "pages/test/test",
      "text":"test"
    }
 ]
},

1690788415271078847.jpg



用第三方平台(轻栈)开发小程序,进入【Design Lab】进行编辑,点击左侧【系统】,开启网站服务,右键编辑就能设置参数。

1690788414672014485.jpg


阅读量:1546
上一页:​小程序开发之网络数据请求
下一页:如何免费领取企业邮箱?