Tabbar components

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/qq_33189961/article/details/98621552

This component is to achieve a similar micro-channel client lowermost navigation bar effect

Introducing components

In page.json introduced into the assembly, if not a custom Tabbar introduction is not required, to use the native.

{
  "usingComponents": {
    "自定义组件名": "路径"
  }
}
如下：

{
  "usingComponents": {
    "mp-tabbar": "../../components/tabbar/tabbar"  //../是回到上一级目录
  }
}

Using Components

Directly in app.json, do not declare additional in wxml

"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "icons/iconHome01.png",
        "selectedIconPath": "icons/iconHome02.png"
      },
      {
        "pagePath": "pages/extend/extend",
        "text": "扩展",
        "iconPath": "icons/extend01.png",
        "selectedIconPath": "icons/extend02.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "icons/mine01.png",
        "selectedIconPath": "icons/mine02.png"
      }
    ]
  }

The effect is as follows:

Property list

Attributes	Types of	Defaults	Mandatory	Explanation
ext-class	string		no	Add the internal structure of the class component, a component can be used to modify the internal pattern
list	array<object>		no	Tabbar array of items, according to the specification, should be at least two items Tabbar
current	number	0	no	The currently selected item index Tabbar
bindchange	eventhandler		no	Tabbar change occurs when the item triggers this event, detail of {index, item}, index is the index Tabbar, item is the item corresponding to the configuration Tabbar

attribute list is an array of objects, each of which represents a Tabbar item, meaning that field

Field name	Types of	Defaults	Mandatory	Explanation
text	string		Yes	Title Tabbar items
iconPath	string		no	Tabbar item icon image path, it is recommended to use an absolute path, relative path to the directory where the relative components.
selectedIconPath	string		no	icon when selected Tabbar items, we recommend using an absolute path, relative path relative to the directory where the assembly.
badge	string		no	Whether Badge upper right corner of Tabbar