Micro letter applet custom tabBar and some of the problems encountered

first step

App.json found in the file "tarBar" object, and then add an attribute, as follows:

"tabBar": {
    "custom": true, //添加这个属性
    "color": "#707070",
    "selectedColor": "#00c4cc",
    "list": [
      {
        "pagePath": "pages/home/index",
        "iconPath": "/static/img/home_def.png",
        "selectedIconPath": "/static/img/home_sel.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/catetory/index",
        "iconPath": "/static/img/type_def.png",
        "selectedIconPath": "/static/img/type_sel.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/home/index",
        "iconPath": "/static/img/my_def.png",
        "selectedIconPath": "/static/img/my_sel.png",
        "text": "我的"
      }
    ]
  }

 

The second step

In the pages folder at the same level directory, create a new folder, the folder name is "custom-tab-bar", just as create custom components, and then write their own basic style,

Mainly through fixed positioning in the end section on the line (in fact, can also go directly to micro-channel public platform to download the sample code):

 

Codebase custom-tab-bar components are described below:

index.wxml Code

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

index.js Code

Component({
  data: {
    selected: 0,
    color: "#707070",
    selectedColor: "#00c4cc",
    list: [{
      pagePath: "/pages/home/index",
      iconPath: "/static/img/home_def.png",
      selectedIconPath: "/static/img/home_sel.png",
      text: "首页"
    }, {
        pagePath: "/pages/catetory/index",
        iconPath: "/static/img/type_def.png",
        selectedIconPath: "/static/img/type_sel.png",
      text: "分类"
      }
      // ,{
      //   pagePath: "/pages/home/index",
      //   iconPath: "/static/img/my_def.png",
      //   selectedIconPath: "/static/img/my_sel.png",
      //   text: "我的"
      // }
      ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      console.log(data.index)
      this.setData({
        selected: data.index
      })
    }
  }
})

 

Here, the basic custom navigation on the page can show out, to note that each tab page to be open, " usingComponents " item, or global settings directly in the app.json in .

After the show, although it can, but you try to switch navigation, you will find a problem, do not always correspond to the style, such as 123 has three navigation, you point after 2, the selected style is 1 point 3 , the selected pattern is 2,

Bit asynchronous feeling, the solution is: in every tab page, add the following code in a periodic function onShow:

if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1
      })
    }

 

Note that each different page tab selected values, corresponding to "custom-tab-bar" index list data in the array, this.getTabBar () Returns the fact that the navigation component is custom "custom-tab-bar" (self-print view), then perform setData to modify the selected value, so that the normal display style. .