小程序自定义tabbar的两种方式

小程序自定义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的话，就不要使用官网的方法，而采用单页面的形式