乐趣区

关于前端:小程序如何实现自定义tabBar

jiezi

背景

因为微信默认的 tabbar 是官网组件，有最高的优先级，因而咱们本人组件的遮罩层无奈笼罩他们。为了解决这个问题，咱们能够应用微信提供的自定义 tabBar 性能。
​

官网文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
​

实现成果：
​

实现形式

  1. 在我的项目根目录下创立 custom-tab-bar 组件，文件名为 index，如图

​

  1. 在 app.json 中把 tabBar 设置为自定义，这里的 list 必须要定义，否者会报错


​

  1. 编写 tabbar 代码

​

wxml

<view class="bar">
  <view class="bar__item {{index == selected ?'bar__active':''}}"wx:for="{{list}}"wx:key="index"bind:tap="handleClick"data-index="{{index}}"data-path="{{item.pagePath}}">
    <image src="{{index == selected ? item.selectedIconPath : item.iconPath}}" mode="aspectFit" class="bar__img" />
    <view class="bar__text">{{item.text}}</view>
  </view>
</view>

js

Component({
  data: {
    selected: 0,
    list: [
      {
        "iconPath": "/static/tabbar/index.png",
        "selectedIconPath": "/static/tabbar/index2.png",
        "pagePath": "/pages/index/index",
        "text": "首页"
      },
      {
        "iconPath": "/static/tabbar/activity.png",
        "selectedIconPath": "/static/tabbar/activity2.png",
        "pagePath": "/pages/find/find",
        "text": "流动"
      },
      {
        "iconPath": "/static/tabbar/mall.png",
        "selectedIconPath": "/static/tabbar/mall2.png",
        "pagePath": "/pages/pageConfig/configIndex",
        "text": "商城"
      },
      {
        "iconPath": "/static/tabbar/my.png",
        "selectedIconPath": "/static/tabbar/my2.png",
        "pagePath": "/pages/my/my",
        "text": "我的"
      }
    ]
  },

  methods: {handleClick(e) {
      let path = e.currentTarget.dataset.path;
      let index = e.currentTarget.dataset.index;
      wx.switchTab({url: path})
      this.setData({selected: index})
    }
  }
});

wxss
特地阐明：自定义的 tabbar 层级默认为 9999（非官方阐明，本人测出的后果），我这里应用的 less，会编译为 wxss。


.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding-bottom: env(safe-area-inset-bottom);
  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  &__img {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
  }
  &__text {font-size: 10px;}

  &__active {
    .bar__text {color: #487271;}
  }
}

json

{
  "component": true,
  "usingComponents": {}}

实现下面的步骤，tarbar 组件就写完了，接下来是应用了
​

应用自定义 tabBar

这个组件不须要手动注册，在 list 中定义的页面会主动加载这个组件。然而须要通过上面的办法手动指定高亮的选项：
​

// 倡议在 onShow 办法中调用，selected 值为索引值
onShow() {this.getTabBar().setData({selected: 0})
}

解决 padding 值

因为应用了自定义 tabbar，因而须要对应用 tababr 的页面设置下内边距，以避免内容被笼罩。能够在 app.wxss 中定义一个全局款式，而后在对应的页面增加这个类名即可。
​


.global__fix_tabbar {padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}

​

最终成果

咱们的小程序应用 vant-weapp 组件库，对于 popup 组件，设置更高的层级，就能够笼罩 tabbar 了
​

<!-- z-index="99999" -->
<van-popup
  show="{{showPhone}}"
  round
  custom-class="custom"
  z-index="99999"
  position="bottom"
  bind:click-overlay="onClosePhone"
  catchtouchmove="ture"
>
 </van-popup>

成果如图：
​

退出移动版