自定义底部tabbar

参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

背景：因为小程序出的默认的tabbar无法自定义想要的样式，所以需要我们去写一个新的，但是我们自己写的每次页面切换时都出闪烁导致体验不是很好，所以再查找其他更好的tabbar方式时，发现微信小程序为我们可以自定义的文档，接下来就一起往下看吧！

首先在 app.json 中的 tabBar 项需指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
在代码根目录下添加 tabBar 代码文件 custom-tab-bar （目前不知道文件名是否为固定的，是参照小程序文档来的）
这个有个弊端就是第一次还是会闪烁，后续都不会啦~

custom-tab-bar文件demo如下：
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
        // })
      }
    }
  }
})

对应跳转文件demo：

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

别人能做到的事,我们一定也能做到，加油！！！

猜你喜欢