This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

Bottom navigation bar

1. Material preparation

Since there are pictures in the bottom navigation bar, we need to find materials. In alibaba icon library, we found 4 ICONS corresponding to home page, category, shopping cart and personal module.

Two different colored copies of each icon, selected and unselected, are placed in the tabbar folder in our images directory:

2. Registration page

First, we need to set up the corresponding navigation page in the applet, and add the page address in the pages node in app.json, so as to complete the registration of the four pages.

{
  "pages": ["pages/index/index"."pages/class/class"."pages/cart/cart"."pages/center/center"]}Copy the code

Third, the bottom navigation bar implementation

The implementation of the bottom navigation bar in a small program is actually very simple, just add a tabbar node in app.json.

  "tabBar": {
    "color": "#7c7c7c"."selectedColor": "#f7545f"."borderStyle": "white"."backgroundColor": "#ffffff"."list": [{"pagePath": "pages/index/index"."iconPath": "images/tabbar/home.png"."selectedIconPath": "images/tabbar/curhome.png"."text": "Home page"
      },
      {
        "pagePath": "pages/class/class"."iconPath": "images/tabbar/class.png"."selectedIconPath": "images/tabbar/curclass.png"."text": "Classification"
      },
      {
        "pagePath": "pages/cart/cart"."iconPath": "images/tabbar/cart.png"."selectedIconPath": "images/tabbar/curcart.png"."text": "Shopping cart"
      },
      {
        "pagePath": "pages/center/center"."iconPath": "images/tabbar/person.png"."selectedIconPath": "images/tabbar/curperson.png"."text": "Personal"}}]Copy the code

With a simple configuration, we have completed the development of a bottom navigation bar, let’s see the effect ~

TabBar is an important feature of small programs, and we need to familiarize ourselves with its configuration items:

attribute mandatory The default value describe
color is Text color on TAB. Only hexadecimal color is supported
selectedColor is The color of text on TAB is selected. Only hexadecimal colors are supported
backgroundColor is TAB background color. Only hexadecimal colors are supported
borderStyle no black TAB border to the color, only support black and white
list is List of tabs, minimum 2, maximum 5 tabs
position no bottom Only bottom and top are supported
cuntom no false Custom tabBar

TAB configuration items:

attribute mandatory The default value describe
pagePath is The page path, which must be defined in Pages
text is Button text on TAB
iconPath no Image path. The size is limited to 40KB. Network images are not supported
selectedIconPath no The size limit is 40KB. Network images are not supported. If positon is top, they are not displayed

The last

Reference: small program development principle and actual ⚽ this article introduces the development of mall class small program bottom navigation bar implementation process, as well as the use of tabBar ~ ⚾ if this article is helpful to you, please click the praises to collect yo ~ πŸ€GitHub blog address: github.com/Awu1227. πŸ‰ I have other columns, welcome to read ~ 🏐 Playing with the Beauty of CSS 🎱Vue from giving up to getting Started 🎳 Simple JavaScript