小程序自定义tabbar

先做一下效果展示吧

本案例是按照官网来做的

app.js代码：

下面的list，官网说是必须的，但我感受不到它的用处

"tabBar": { 
   
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "borderStyle": "white",
    "list": [
      { 
   
        "pagePath": "pages/page/index",
        "text": "首页",
        "iconPath": "/imgs/tab.png",
        "selectedIconPath": "/imgs/tab.png"
      },
      { 
   
        "pagePath": "pages/scroll/index",
        "text": "滚动",
        "iconPath": "/imgs/tab.png",
        "selectedIconPath": "/imgs/tab.png"
      }
    ]
  },
  "usingComponents": { 
   }

tabbar组件的创建

在根目录下创建custom-tab-bar目录，然后在该目录下新建组件component,注意是组件，不要建成page页面，虽然都一样是js/json/wxml/wxss四个文件

custom-tab-bar/index.js代码

data: { 
   
  curIndex: 0,
  color: "#00f",
  selectedColor: "#ff0",
  list: [
    { 
   
      pagePath: "/pages/page/index",
      iconPath: "/imgs/tab.png",
      selectedIconPath: "/imgs/tab1.png",
      text: "首页"
    }, { 
   
      pagePath: "/pages/scroll/index",
      iconPath: "/imgs/tab.png",
      selectedIconPath: "/imgs/tab1.png",
      text: "滚动"
    },
  ]
}，
methods: { 
   
  switchTab(e) { 
   
    let url = e.currentTarget.dataset.url
    let index = e.currentTarget.dataset.index
    wx.switchTab({ 
   
      url
    })
    // this.setData({ 
   
    // curIndex:index
    // })
    wx.setStorageSync('curIndex', index)
  },
}

custom-tab-bar/index.wxml代码

<cover-view class="container">
  <cover-view class="item" bindtap='switchTab' wx:for="{ 
    {list}}" wx:key="{ 
    {index}}" data-index="{ 
    {index}}" data-url="{ 
    {item.pagePath}}">
    <cover-image class="icon" src='{ 
    {index==curIndex?item.selectedIconPath:item.iconPath}}'></cover-image>
    <cover-view class="text" class="{ 
    {index==curIndex?'textStyle':''}}">{
  
  {item.text}}</cover-view>
  </cover-view>
</cover-view>

custom-tab-bar/index.wxss代码

.container{ 
   
  height: 120rpx;
  background:green;
  display: flex;
}
.item{ 
   
  flex:1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.icon{ 
   
  width:60rpx;
  height: 60rpx;
  margin:0 auto;
}
.textStyle{ 
   
  color:#fff;
}

最好给自定义tabbar设置一个高度，这样的话，如果页面需要用到scroll-view那高度也好控制，scroll-view的精确控制可以参考scroll的高度设置

最后，设置tabbar的选中状态，要在每个tab页面的onShow中设置

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

自定义tabbar就这样可以了

但是，
问题一：进入小程序第一次进行tabbar切换的时候有闪烁问题
问题二：本案例的启动页是首页，第一次切换到滚动也的时候除了闪烁问题外，scroll-view的高度也比正常情况下小了100rpx（正好是滚动页中topNav的高度），下图是滚动页代码

<view class="topNav"></view>
<scroll-view style="{ 
      { 
      'height:'+scrollHeight+'px'}}" scroll-y>
  <view class="red"></view>
  <view class="blue"></view>
  <view class="red"></view>
  <view class="blue"></view>
  <view class="red"></view>
  <view class="blue"></view>
</scroll-view>

所以本例的自定义tabbar就实现了
（ps:如果滚动页设置为启动页，就不会有问题二的出现）
闪烁问题，网上也找不到解决的办法，官网也未提及，希望有办法的朋友分享给我
如果想要避免上述问题，来一个完美的tabbar的话，就不要使用官网的方法，而采用单页面的形式