Using tabbar in wechat applet

Prospect knowledge

front We learned ： stay app.json To configure the applet globally ,app.json The content of the file is a JSON object , There are many properties , One of the common attributes is tabBar. If the applet is more than one tab application , You can go through tabBar Appoint tab Column performance , as well as tab The corresponding page displayed when switching .

tabBar The attribute value of is also an object , This object contains the following common properties ：

• color,tab The default color of the text on , Only hex colors... Are supported , Required .
• selectedColor,tab The color when the upper text is selected , Only hex colors... Are supported , Required .
• backgroundColor,tab Background color , Only hex colors... Are supported , Required .
• position,tabBar The location of , Only two values are supported ：bottom and top , The default value is bottom.
• list,tab A list of , Is an array , The minimum number of array elements 2 individual , most 5 individual . Each array element is an object , Contains the following attribute values ：
  • pathPath, Page path , Must be in pages In the definition of , Required .
  • text,tab Text on , Required .
  • iconPath, Picture path , Not required .icon Size limited to 40kb, The recommended size is 81px*81px, Network pictures are not supported . When position The value is top when , No display icon.
  • selectedIconPath, The path of the selected image , Not required .icon Size limited to 40kb, The recommended size is 81px*81px, Network pictures are not supported . When position by top when , No display icon.

Applet project

pages Under the new Page：home（ Home page ）、camera（ Taking pictures ）、user（ Personal center ）.

• pages/home/home.wxml、home.wxss、home.js、home.json
• pages/camera/camera.wxml、camera.wxss、camera.js、camera.json
• pages/user/user.wxml、user.wxss、user.js、user.json

Create a new folder under the project root directory ：static,static I'm gonna go ahead and create a new folder ：images,images I'm gonna go ahead and create a new folder ：tabIcons,tabIcons Lower storage tabBar Icons to be used .

The main files involved in the code are ：

1. app.json
2. pages/home/home.wxml
3. pages/camera/camera.wxml
4. pages/user/user.wxml

app.json

{
    
  "pages": [
    "pages/home/home",
    "pages/camera/camera",
    "pages/user/user"
  ],
  "window": {
    
    "navigationBarBackgroundColor": "#971a22",
    "navigationBarTitleText": " home page ",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    
    "color": "#000000",
    "selectedColor": "#971a22",
    "backgroundColor": "#ffffff",
    "list": [
      {
    
        "pagePath": "pages/home/home",
        "text": " Home page ",
        "iconPath": "/static/images/tabIcons/home.png",
        "selectedIconPath": "/static/images/tabIcons/home-fill.png"
      },
      {
    
        "pagePath": "pages/camera/camera",
        "text": " Taking pictures ",
        "iconPath": "/static/images/tabIcons/camera.png",
        "selectedIconPath": "/static/images/tabIcons/camera-fill.png"
      },
      {
    
        "pagePath": "pages/user/user",
        "text": " Personal center ",
        "iconPath": "/static/images/tabIcons/user.png",
        "selectedIconPath": "/static/images/tabIcons/user-fill.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/home/home.wxml

<view class="camera">
  Here is Home Page
</view>

pages/camera/camera.wxml

<view class="camera">
  Here is Camera Page
</view>

pages/user/user.wxml

<view class="camera">
  Here is User Page
</view>

Related links

New wechat applet project