小程序開發問題之自定義tabbar（絕對有用）

系統提供tabbar樣式是不是醜得產品經理內分泌失調。

還不能調整圖片的大小和文字的大小。

自定義tabbar的思路是：

1.不適用系統提供的tabbar（app.json中相關tabbar的東西都沒有）

2.創建四個組件作爲自定義tabbar對應的頁面

3.創建一個頁面使用上一步創建的組件

 

1.創建order組件：

組件類似頁面一樣，都有wxml,js,json,wxss四個文件。

order.json:

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

component 爲true

 

order.js:

var app = getApp();

Component({

  /* 開啓全局樣式設置 */
  options: {
    addGlobalClass: true,
  },

  /* 組件的屬性列表 */
  properties: {
    name: {
      type: String,
      value: 'Index'
    }
  },

  /* 組件的初始數據 */
  data: {

  },

  /* 組件聲明周期函數 */
  lifetimes: {
    attached: function () {

    },
    moved: function () {

    },
    detached: function () {

    },
  },

  /* 組件的方法列表 */
  methods: {

  }

})

其他三個組件類似創建。

 

2.創建使用組件的頁面 index

index.json:

"usingComponents": {
    "component_index": "/pages/component/index/index",
    "component_sell": "/pages/component/sell/sell",
    "component_order": "/pages/component/order/order",
    "component_my": "/pages/component/person/person"
  }

這一步是爲了讓index頁面識別自定義組件，並設置了自定義組件的別名。後面在index.wxml就直接使用component_index代表自定義組件即可。

 

index.js:

Page({
  data: {
    currentTab: 0,
    items: [
      {
        "iconPath": "/pages/img/icon-main.png",
        "selectedIconPath": "/pages/img/icon-main-selected.png",
        "text": "首頁"
      },
      {
        "iconPath": "/pages/img/icon-sell.png",
        "selectedIconPath": "/pages/img/icon-sell-selected.png",
        "text": "售賣"
      },
      {
        "iconPath": "/pages/img/icon-order.png",
        "selectedIconPath": "/pages/img/icon-order-selected.png",
        "text": "訂單"
      },
      {
        "iconPath": "/pages/img/icon-person.png",
        "selectedIconPath": "/pages/img/icon-person-selected.png",
        "text": "我的"
      }
    ]
  },
  swichTab: function (e) {
    let that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
  onLoad: function (option) {

  }
})

創建每個tab需要的數據 和 點擊tab的方法

 

index.wxml:

<view hidden="{{currentTab == 0? false: true}}">
  <component_index/>
</view>
<view hidden="{{currentTab == 1? false: true}}">
  <component_sell/>
</view>
<view hidden="{{currentTab == 2? false: true}}">
  <component_order/>
</view>
<view hidden="{{currentTab == 3? false: true}}">
  <component_my/>
</view>

<view class="navigation-tab-group">
  <view class="tabs {{currentTab == idx ? 'active' : 'default' }}" wx:for="{{items}}" wx:key="prototype" wx:for-index="idx" wx:for-item="item" data-current="{{idx}}" bindtap="swichTab">
    <text class="tab-text" wx:for-index="idx" data-current="{{idx}}" >{{item.text}}</text>
    <image class="tab-img" wx:for-index="idx" data-current="{{idx}}" src="{{currentTab == idx ? item.selectedIconPath : item.iconPath }}"></image>
  </view>
</view>

創建自定義tabbar並使用自定義的組件。

 

index.wxss:

page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.navigation-tab-group {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
}

.tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  background: #FFFFFF;
  height: 120rpx;

}

.tab-text {
  font-size: 16rpx;
  line-height: 35rpx;
}

.tab-img {
  width:22rpx;
  height: 22rpx;
}

.default {
  line-height: 75rpx;
  text-align: center;
  flex: 1;
  color: #eee;
  font-weight: bold;
  font-size: 28rpx;
}

.active {
  line-height: 75rpx;
  text-align: center;
  color: black;
  flex: 1;
  font-weight: bold;
  font-size: 28rpx;
}

.show {
  display: block;
  flex: 1;
}

.hidden {
  display: none;
  flex: 1;
}

 

結果：

     

 

 

 

 

最後：參考一個博客的代碼（具體的地址和博客名字忘記了，若有冒犯還望見諒）