WeChat applet: selection bar at the bottom of topBar

First look at the effect: the bottom is divided into three pages, click on different options to jump to the corresponding page.

Below is the folder structure

This is divided into three pages, namely index, dujia, Info

Here is the code:

---

app.json

{
  "pages": [//有几个页面，pages里面就要绑定几个
    "pages/dujia/dujia",
    "pages/index/index",
    "pages/info/info"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#DF3031",
    "navigationBarTitleText": "topBar练习",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#DF3031",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "第一页",
        "iconPath": "images/1.png",
        "selectedIconPath": "images/1.png"
      },
      {
        "pagePath": "pages/dujia/dujia",
        "text": "第二页",
        "iconPath": "images/2.png",
        "selectedIconPath": "images/2.png"
      },
      {
        "pagePath": "pages/info/info",
        "text": "第三页",
        "iconPath": "images/3.jpg",
        "selectedIconPath": "images/3.jpg"
      }
    ]
  }
}

Other pages are written in the .wxml file in the corresponding folder. The .wxml file is like the html in our web design.
For example my index page:

<view>
  第一页
</view>