微信小程序——UI(1)、tabBar

tabBar

底部Tab切换选项或顶部Tab切换选项。数目必须是2-5个。

常用属性

• Color
  文字默认颜色

• selectedColor
  文字选中颜色

• backgroundColor
  背景颜色

• borderStyle
  上边框颜色，默认为black，仅支持black或white

• position
  tabBar的位置，默认为bottom，仅支持bottom或top，如果设为top，则图标属性无效不会显示图标仅显示文字。

• list
  选项列表。2-5个。Item属性如下：

  • text
    文字
  • pagePath
    页面路径，必须在 pages 中先定义
  • iconPath
    图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。
    当 postion 为 top 时，不显示 icon
  • selectedIconPath
    选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。当 postion 为 top 时，不显示 icon。

• 自定义tabBar
  如果系统的tabBar的样式不满足需要，可以自定义tabBar。"libVersion": "2.5.0"。
  基础库 2.5.0 开始支持，低版本需做兼容处理，可使用官方提供的判断是否支持的方式，若不支持提示用户更新微信客户端程序。
  app.json中添加属性"usingComponents": {}，且tabBar中添加"custom": true。
  在代码根目录下添加入口文件:custom-tab-bar/index.js、custom-tab-bar/index.json、custom-tab-bar/index.wxml、custom-tab-bar/index.wxss且编写代码即可。
  可参照官网说明下载官方demo后查看更改自定义。

该笔记实现自定义效果：

本文源码地址，若需git下载该tag版本，请注意命令指定tag。