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

tabBar

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

常用属性

  • Color
    文字默认颜色

  • selectedColor
    文字选中颜色

  • backgroundColor
    背景颜色

  • borderStyle
    上边框颜色,默认为black,仅支持blackwhite

  • position
    tabBar的位置,默认为bottom,仅支持bottomtop,如果设为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.jscustom-tab-bar/index.jsoncustom-tab-bar/index.wxmlcustom-tab-bar/index.wxss且编写代码即可。
    可参照官网说明下载官方demo后查看更改自定义。

该笔记实现自定义效果:
微信小程序——UI(1)、tabBar
本文源码地址,若需git下载该tag版本,请注意命令指定tag。

上一篇:创建一个dynamics CRM workflow (一) - Introduction to Custom Workflows


下一篇:How to add custom action button - --ng2-smart-table