How to switch the WeChat applet tabBar to realize the page jump?

How to achieve the rendering

?

"tabBar": {
    "selectedColor": "#d81e06",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-active.png"
    },{
      "pagePath": "pages/class/class",
      "text": "分类",
      "iconPath": "/images/fen.png",
      "selectedIconPath": "/images/fen-active.png"
    },{
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "/images/cart.png",
      "selectedIconPath": "/images/cart-active.png"
    },{
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "/images/my.png",
      "selectedIconPath": "/images/my-active.png"
    }
  ]

Note that the
navigationBarTitleText attribute cannot be removed from the json file of each page. Otherwise, it will report
the meaning of each attribute.
TabBar refers to the navigation configuration attribute at the bottom.

The color of the bottom navigation text when color is not selected

selectedColor The color of the bottom navigation text when selected

borderStyle The sample color of the bottom navigation border (note that if no style is written here, the default light gray line will appear on the upper border of the navigation box)

list navigation configuration array

selectedIconPath icon path when selected

Icon Path when iconPath is not selected

pagePath page access address

text The text below the navigation icon