weapp tabbar

WeChat applet custom tab bar (TabBar) component

Supports icons without text, large icons, floating icons, etc.

Source code download: https://github.com/tanggaowei/weapp-tabbar

The code for the custom tab bar component is in the /commpents/tabbar directory and can be directly copied to other projects for use. The following describes how to use it.

1. Reference components

In the json file of the page that needs to use the tab bar, use usingComponents configuration item to reference the tab bar component:

 {
  "usingComponents": {
    "tabbar": "/components/tabbar/tabbar"
  }
}

2. Add components

Now add the component in the wxml file:

 <tabbar data="{{tabbar}}"></tabbar>

Then define the component data in the js file, such as tabbar:

 Page({
  data: {
    tabbar: {
      "color": "#999999",
      "selectedColor": "#7788dd",
      "borderStyle": "#dcdcdc",
      "backgroundColor": "#ffffff",
      "list": [{
          "key": "home",
          "iconPath": "/images/icon_home.png",
          "selectedIconPath": "/images/icon_home_active.png",
          "text": "首页"
        },
        {
          "key": "tag",
          "iconPath": "/images/icon_tag.png",
          "selectedIconPath": "/images/icon_tag_active.png",
          "text": "标签"
        },
        {
          "key": "new",
          "iconPath": "/images/icon_plus_big.png",
          "iconType": "big overflow circle shadow",
          "choose": "disable"
        },
        {
          "key": "notebook",
          "iconPath": "/images/icon_notebook.png",
          "selectedIconPath": "/images/icon_notebook_active.png",
          "text": "日记本"
        },
        {
          "key": "me",
          "iconPath": "/images/icon_me.png",
          "selectedIconPath": "/images/icon_me_active.png",
          "text": "我"
        }
      ]
    }
  }
})

The data format of the custom tab bar component is the same as the original tab bar of the mini program. Here we focus on the use of the new attributes iconType and choose .

iconType has a total of 4 values: big , overflow , circle and shadow . These four values ​​can be used individually or simultaneously. Separate them with spaces when used simultaneously (actually it will be filled in the class attribute of the corresponding tag). Their functions are as follows:

• big uses large icons and sets the width and height of the icon to 95rpx, which is equal to the height of the tab bar;
• overflow moves the icon upward so that part of it is displayed outside the tab bar;
• Circle cuts the image of the icon into a circle;
• Shadow adds a shadow to the icon.

The choose attribute has two values: enable and disable, and the default is enable. When it is set to disable, clicking the label item will not change the selected state of the label bar, but the change event will still be triggered.

3. Monitor switching events

Use the bindchange attribute to bind the listening event:

 <tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

Then implement the listening method in Page():

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    } else {
      this.setData({
        choose_index: e.detail.index
      })
    }
  }

The listening method will get two data: e.detail.key and e.detail.index . Among them, e.detail.key corresponds to the key value of the data tabbar.list array element, which is not as good as the above home, tag, new, notebook and me. e.detail.index corresponds to the sequence number of the array element, such as 0, 1, 2, 3, 4.

4. Practical plan

1) Custom components

Custom components are similar to pages and have their own wxml templates and wxss styles, which facilitates the separation of logic and views, which is better than using templates directly. Here is sample code for switching using a custom component in index.wxml:

 <home wx:if="{{choose_index==0}}"></home>
<tag wx:if="{{choose_index==1}}"></tag>
<notebook wx:if="{{choose_index==3}}"></notebook>
<me wx:if="{{choose_index==4}}"></me>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

Among them, <home> , <tag> , <notebook> and <me> are four custom components that implement their own functions respectively.

2) Use templates

The switching effect can also be achieved using templates, but the logic code may need to be written on the same page. For example:

 <import src='/template/home/home.wxml' />
<import src='/template/tag/tag.wxml' />
<import src='/template/notebook/notebook.wxml' />
<import src='/template/me/me.wxml' />

<template is="home" wx:if="{{choose_index==0}}"></template>
<template is="tag" wx:if="{{choose_index==1}}"></template>
<template is="notebook" wx:if="{{choose_index==3}}"></template>
<template is="me" wx:if="{{choose_index==4}}"></template>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

3) Navigation and jump

You can use wx.navigateTo() or wx.redirectTo() interface in the listening method to switch page content. For example:

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    }
  }