小程序-微信小程序自定义tabbar

第一步：在app.json中根据使用系统tabbar的步骤添加属性，然后在额外添加一个cutsom：true的属性，虽然custom为true之后，我们添加的系统tabbar并不会渲染，但是系统会默认我们添加的页面是属于tabbar页面，之后在自定义tabbar中可以通过wx.switchTab来进行切换。

"tabBar": {
    "custom": true,
    "color": "#666666",
    "selectedColor": "#1e9e92",
    "list": [
      {
        "pagePath": "pages/grow/grow",
        "text": "成长",
        "iconPath": "/images/tabbar_grow.png",
        "selectedIconPath": "/images/tabbar_grow_select.png"
      },{
        "pagePath": "pages/home/home",
        "text": "主页",
        "iconPath": "/images/tabbar-badge.png",
        "selectedIconPath": "/images/tabbar-badge-select.png"
      },{
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/images/tabbar-mine.png",
        "selectedIconPath": "/images/tabbar-mine-select.png"
      }]
  },

第二步：创建一个自定义tabbar组件

.xml文件如下：

<view class="tab-bar {{isIphoneXSeries ? 'iphoneX' : ''}}">
  <block wx:for="{{items}}" wx:key="title">
    <view class="tab-item" bindtap="onChangeTab" data-index="{{index}}">
      <image class="tab-icon" src="{{activeIndex == index ? item.selectedIcon : item.icon}}"></image>
      <view class="tab-title {{activeIndex == index ? 'active' : 'normal'}}">{{item.title}}</view>
    </view>
  </block>
</view>

.wxss文件如下：

.tab-bar {
  width: 100vw;
  height: 49px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: #ccc solid 1px;
  z-index: 999;
}

.iphoneX {
  padding-bottom: 34px;
}


.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-icon {
  width: 25px;
  height: 25px;
}

.tab-title {
  font-size: 24rpx;
}

.tab-title.active {
  color: #1e9e92;
}

.tab-title.normal {
  color: #666;
}

.json文件如下：

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

.js文件如下：

// components/custom_tabbar/custom_tabbar.js
var app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    activeIndex: {
      type: Number,
      value: 1
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    isIphoneXSeries: false,
    items: [
      {
        'title': '成长',
        'icon': '/images/tabbar_grow.png',
        'selectedIcon': '/images/tabbar_grow_select.png',
        'path': '../../pages/grow/grow'
      },{
        'title': '主页',
        'icon': '/images/tabbar-badge.png',
        'selectedIcon': '/images/tabbar-badge-select.png',
        'path': '../../pages/home/home',
      },{
        'title': '我的',
        'icon': '/images/tabbar-mine.png',
        'selectedIcon': '/images/tabbar-mine-select.png',
        'path': '../../pages/mine/mine'
      },
    ]
  },

  attached: function() {
    this.setData({
      isIphoneXSeries: app.globalData.isIphoneXSeries
    })
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChangeTab(res) {
      var index = res.currentTarget.dataset.index;      
      wx.switchTab({
        url: this.data.items[index].path
      })
    }
  }
})

第三步：在tab页面引入tabbar组件

//grow.json中引入组件
"usingComponents": {
    "tabbar": "../../components/custom_tabbar/custom_tabbar"
  }
//在grow.wxml中使用组件
<tabbar activeIndex="{{0}}"/>

//home.json中引入组件
"usingComponents": {
    "tabbar": "../../components/custom_tabbar/custom_tabbar"
  }
//在home.wxml中使用组件
<tabbar activeIndex="{{1}}"/>

//mine.json中引入组件
"usingComponents": {
    "tabbar": "../../components/custom_tabbar/custom_tabbar"
  }
//在mine.wxml中使用组件
<tabbar activeIndex="{{2}}"/>

小程序-微信小程序自定义tabbar

第二步：创建一个自定义tabbar组件

.xml文件如下：

.wxss文件如下：

.json文件如下：

.js文件如下：

第三步：在tab页面引入tabbar组件

总结：使用自定义组件的流畅性并没有系统的好，第一次加载的时候会有一次闪烁的问题。