Custom bottom tabbar

Reference document: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

Background: Because the default tabbar produced by the applet cannot customize the desired style, we need to write a new one, but the experience we wrote ourselves flickers every time the page is switched, so the experience is not very good, so we will look for other In the better tabbar mode, we found that the WeChat applet is a document that we can customize, so let's look down together!

First, the tabBar item in app.json needs to specify the custom field, and the rest of the tabBar related configurations are also complete.
The usingComponents item needs to be declared in the json of all tab pages, and it can also be enabled globally in app.json.
Add the tabBar code file in the root directory of the code custom-tab-bar(I don’t know whether the file name is fixed or not, but refer to the applet document)
这个有个弊端就是第一次还是会闪烁，后续都不会啦~

The custom-tab-bar file demo is as follows:
index.wxml

<view class="my_tab">
  <view class="item-tab" wx:for="{
   
   {list}}" wx:key="index" data-path="{
   
   {item.pagePath}}" data-name="{
   
   {item.text}}" data-index="{
   
   {index}}" bindtap="switchTab" style="color:{
   
   {selected==index?'#1A1C36':'#8C8E9B'}}">
    <image class="img" mode="heightFix" src="{
   
   {selected==index?item.selectedIconPath:item.iconPath}}" />
    <view>{
   
   {item.text}}</view>
  </view>
</view>

index.wxss

/* pages/my_tab.wxss */
.my_tab {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  background-color: #FFFFFF;
  line-height: 20rpx;
  font-size: 20rpx;
  box-shadow: 0px -1px 0px 0px #E3E4E7;
  /* overflow: hidden; */
  padding-bottom: env(safe-area-inset-bottom);
}

.my_tab .item-tab {
  flex: 1;
  text-align: center;
}

.my_tab .img {
  width: 48rpx;
  height: 48rpx;
  display: block;
  margin: 14rpx auto 4rpx;
}

index.js
这里的list需要跟app.json下的tabBar中list保持一致，图片路径引入比那边多个/
在切换时只需要这个加switchTab就可以，两边都加会出现闪烁

Component({
  data: {
    selected: 0,
    "color": "#8C8E9B",
    "selectedColor": "#1A1C36",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "/pages/home/index",
        "iconPath": "/utils/assets/tab1.png",
        "selectedIconPath": "/utils/assets/tab1-select.png",
        "text": "爱车"
      },
      {
        "pagePath": "/pages/activityHome/index",
        "iconPath": "/utils/assets/activity.png",
        "selectedIconPath": "/utils/assets/activity-select.png",
        "text": "活动"
      },
      {
        "pagePath": "/pages/me/index",
        "iconPath": "/utils/assets/tab2.png",
        "selectedIconPath": "/utils/assets/tab2-select.png",
        "text": "我的"
      }
    ]
  },
  attached() {},
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      if (data.index !== this.data.selected) {
        const url = data.path
        getApp().$$Rangers.event('bottom_nav', {
          'bottom_nav_name': data.name
        });
        wx.switchTab({
          url
        })
        // this.setData({
        //   selected: data.index
        // })
      }
    }
  }
})

Corresponding jump file demo:

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0  // 这个对应list数组中的下标
        })
      	// 下面就跟正常写页面一样啦~~~~~~
      }
    }
  },
  data:{},
  onload(){}
 })

What others can do, we can do too, come on! ! !

Custom bottom tabbar

Guess you like