The body of the

Sample code that seems to work well

We first copied basic usage samples of the Tabbar TAB bar documents in Vant appellate P directly to the custom-tab-bar folder

  • index.wxml

    <! For demonstration purposes, I have reduced the number of tabbars in the sample to two -->
<van-tabbar>
  <van-tabbar-item icon="home-o">Label 1</van-tabbar-item>
  <van-tabbar-item icon="search">Label 2</van-tabbar-item>
</van-tabbar>
Copy the code

  • index.js

    Page({
  data: {
    active: 0,},onChange(event) {
    The value of event.detail is the index of the currently selected item
    this.setData({
      active: event.detail }); }});Copy the code

After entering the code in the basic usage sample, you see that the tabbar child becomes active when you click on it. The tabbar click-to-jump feature is about halfway there.

All you need to do is go to the corresponding page when the tabbar child is active

Page jump with many problems

Since we only need to implement the page-skipping function in tabbar bar, we will directly go to the wechat applet documentation to find the corresponding routing API: wx.switchTab, according to the sample in the documentation, enter the index.js file in our own project, and then we will be done.

Let’s modify the code slightly to make it more readable

  • index.js

    Page({
  data: {
    // Encapsulate all tabbar data into tabbars objects
    tabbars: {
      // tabbar all subitems
      list: [{
        pagePath: "/pages/page1/page1".text: "Page one".icon: "home-o"
      }, {
        pagePath: "/pages/page2/page2".text: "Page two".icon: "search"}].// The currently active tabbar child
      active: 0,}},onChange: function(event) {
    The value of event.detail is the index of the currently selected item
    console.log(event.detail);
    const index = event.detail;
    // Active tabbar child Settings
    this.setData({
      "tabbars.active": index
    });
    // Page routing
    wx.switchTab({
      url: this.data.tabbars.list[index].pagePath }); }});Copy the code

  • index.wxml

    <van-tabbar active="{{tabbars.active}}" bind:change="onChange">
  <block wx:for="{{tabbars.list}}" wx:key="text">
    <van-tabbar-item icon="{{item.icon}}">{{item.text}}</van-tabbar-item>
  </block>
</van-tabbar>
Copy the code

However, after the code input was completed, the test found that the actual effect was not as expected…

As can be seen from the GIF, after the tabbar subitem is pressed to jump, the upper page realizes the normal page jump, but the subitem in the lower tabbar bar does not enter the corresponding active state…

To analyze problems

From the problems we can see that: When a tabbar bar is used for a page jump, the active status of the tabbar child stays the same as before, rather than changing accordingly. That is, the value of the active property of the Tabbars object in the index.js file does not change accordingly

In the custom tabBar in the wechat applets document, I found the following content

The custom tabBar component instance on each TAB page is different. You can obtain the custom tabBar component instance on the current page through the getTabBar interface under custom Components.

.

My understanding of this passage is as follows: Every time you switch to a new TAB page using wx.switchtab (), the custom tabbar bar on that page will be re-rendered based on the files in the custom-tab-bar folder. The active property of the Tabbars object is set to 0 by default, so every time you switch from the current TAB to a new TAB, the tabbar bar at the bottom makes the first tabbar child active, as shown below (for illustration, I added a third tabbar subitem):

The actual routing logic for the GIF above is:

  1. Route from page 1 to page 2
  2. Route from page 2 to page 3

As you can see, each time you route to a new page, the tabbar bar at the bottom makes the first tabbar child active

Find your own way

Based on the following known facts:

  1. Each time you route to a new page, the bottom one is rerenderedtabbar 栏
  2. index.jsIn the filetabbarsThe object’sactiveProperty setting defaults results in bottomtabbarColumn item active status does not match target page

Then I think it can be handled like this:

  1. Cancel the default value of the active property of a Tabbars object

    active: null
Copy the code

  2. Using the this.gettabbar ().setData() interface, set the corresponding active state for the tabbar bar on the target page

    • index.js

        onChange: function(event) {
    The value of event.detail is the index of the currently selected item
    const nextIndex = event.detail;
    
    // Remove active value setting code
    
    wx.switchTab({
      url: this.data.tabbars.list[nextIndex].pagePath
    });
  }
Copy the code

    • Page1.js (code for other pages that need to be routed through tabbar)

        // Set the corresponding active tabbar item in the page onLoad cycle
  onLoad: function (options) {
    this.getTabBar().setData({
      // CURRENT_ACTIVE_TABBAR: custom constant, the active tabbar item corresponding to the current page
      "tabbars.active": CURRENT_ACTIVE_TABBAR
    });
  },
Copy the code

After entering the above code, the effect should look like the following image:

You can see that the active status of the routing page corresponds to that of the subitems in the tabbar bar below

trailer

Handle customization from a component perspectivetabbar

Although the problem seems to be solved by my own method, I found the following content in the custom tabBar in the wechat applets document:

Note: to achieve TAB selected state, to the current page, throughgetTabBarThe interface gets the component instance and calls setData to update the selection. See the code sample at the bottom

.

Although the core of the TAB selection code provided in the wechat applets is also the this.gettabbar ().setdata () interface, it does not process the custom tabbar bar as a Page object, as Vant appellate documents do. Instead, we treat it as a Component object, for which reason we’ll have to talk about next time 🙂

Appeap -Vant appeAP – appeAP