微信小程序開發(fā)過程中读串，難免需要在不同的頁面中顯示不同的tabbar，也就底部的切換欄歼指。而在小程序開發(fā)中爹土，原生的tabbar只能定義一次甥雕，而且踩身，官方的tabbar切換，定義的list不能超過五項社露，如果在其他頁面中想顯示不同的tabbar或者想使用多個按鈕切換挟阻，此時就需要我們自定義組件來實現(xiàn)tabbar。
一峭弟、定義父組件
此處所說的父組件是一個正常開發(fā)的page頁附鸽，作為一個容器來承載我們所需要切換的子組件以及tabbar，具體wxml代碼如下：
index.wxml
index.wxml中主要用于放置切換的不同組件和底部的切換欄瞒瘸，這里使用的wx:if來實現(xiàn)顯隱坷备，略微一些問題，會產(chǎn)生一些延時或者小抖動的情況情臭。
<view style='margin-bottom:130rpx;'>
<!-- 組件顯示省撑，根據(jù)自己需求添加 -->
<view wx:if="{{ currentTab == 0 }}">
<component_index id="component_index"/>
</view>
<view wx:if="{{ currentTab == 1 }}">
<component_list id="component_list"/>
</view>
<view wx:if="{{ currentTab == 2 }}">
<component_mine id="component_mine"/>
</view>
</view>
<!-- 自定義 tabbar -->
<view class="nav-tabs">
<view class="tab-list {{currentTab == idx ? 'active' : 'default' }}" wx:for="{{items}}" wx:key="prototype" wx:for-index="idx" wx:for-item="item" data-current="{{idx}}" bindtap="swichNav">
<text class="tab-text" wx:for-index="idx" data-current="{{idx}}" src="{{currentTab == idx ? item.selectedIconPath : item.iconPath }}">{{item.text}}</text>
<image class="iconPath" wx:for-index="idx" data-current="{{idx}}" src="{{currentTab == idx ? item.selectedIconPath : item.iconPath }}"></image>
</view>
</view>
具體的樣式這里就不展示了，可以去github上面找demo俯在，地址在上面
index.json
在index.json中需要定義并引入所需要使用的組件路徑
{
"usingComponents": {
"component_index": "/pages/component/index/index",
"component_mine": "/pages/component/mine/mine",
"component_list": "/pages/component/list/list"
}
}
index.js
index.js主要定義底部tabbar的圖片和文字竟秫，以及一些在當(dāng)前頁面中使用的函數(shù)等。
let app = getApp()
Page({
data: {
currentTab: 0,
//這里只做tab名和顯示圖標(biāo)
items: [{
"text": "主頁",
"iconPath": "/assets/icons/index.png",
"selectedIconPath": "/assets/icons/index_active.png"
},
{
"text": "列表",
"iconPath": "/assets/icons/list.png",
"selectedIconPath": "/assets/icons/list_active.png"
},
{
"text": "我的",
"iconPath": "/assets/icons/mine.png",
"selectedIconPath": "/assets/icons/mine_active.png"
}
]
},
swichNav: 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) {
}
})
注：如果子組件中涉及上拉加載的情況跷乐，可在父組件中onReachBottom中調(diào)用自組件的方法肥败，代碼如下：
this.selectComponent("子組件id名").子組件內(nèi)方法;
該方法同樣適用于獲取、修改自組件的變量值愕提。
二馒稍、子組件定義
子組件需要定義在pages下面的component中，子組件中properties可用于接受父組件傳的值浅侨，data用于定義當(dāng)前組件的初始數(shù)據(jù)纽谒，methods用于定義當(dāng)前組件內(nèi)的方法。
子組件也同樣擁有生命周期仗颈，但與page有所差距佛舱，需要注意在使用過程中的一些問題：
1椎例、created 組件實例化，但節(jié)點樹還未導(dǎo)入请祖，因此這時不能用setData订歪；
2、attached 節(jié)點樹完成肆捕，可以用setData渲染節(jié)點刷晋，但無法操作節(jié)點；
3慎陵、ready 組件布局完成眼虱，這時可以獲取節(jié)點信息，也可以操作節(jié)點席纽；
4捏悬、moved 組件實例被移動到樹的另一個位置；
5润梯、detached 組件實例從節(jié)點樹中移除过牙。
注：除了生命周期與正常的page有所區(qū)別，其他的基本類似纺铭，屬于正常的頁面開發(fā)和邏輯實現(xiàn)寇钉，主要是在調(diào)用子組件和子組件上拉加載時調(diào)用方法的問題。
如有問題舶赔，請各位及時指正扫倡，感謝！
