快應用中是沒有提供和小程序一樣的原生底部tabbar的，如果你一定要實現的話，就得自己模擬，但是自己模擬的話，有一些問題，比如：在自定義的tabbar中引入的組件是無法觸發自定義組件的onShow生命週期，需要自己手動觸發；再者，當你想從其他頁面中跳轉到tabbar頁面時，也是要自己重新寫方法來實現，直接跳轉無法實現；然後就是，在自定義的tabbar頁面中跳轉後，點擊返回，這個時候總是返回到首頁，這個無法控制，暫時也沒想到方法，即使你想自定義頭部中的返回，也無法控制，畢竟你還有手機本身的返回鍵
1.效果圖
![clipboard.png]( "clipboard.png")
2.頁面佈局
<template>
<div class="container">
<tabs onchange="changeTabactive">
<!-- 各個頁面的組件 -->
<tab-content>
<block for="content.list">
<div class="item-container">
<pagehome if="{{$item.title=='首頁'?true:false}}" id="tabs{{$item.i}}"></pagehome>
<pageshop if="{{$item.title=='店鋪'?true:false}}" id="tabs{{$item.i}}"></pageshop>
<pagecart if="{{$item.title=='購物車'?true:false}}" id="tabs{{$item.i}}"></pagecart>
<pageuser if="{{$item.title=='我的'?true:false}}" id="tabs{{$item.i}}"></pageuser>
</div>
</block>
</tab-content>
<!-- 底部的tabbar按鈕 -->
<tab-bar class="tab_bar">
<block for="content.list">
<div class="tab_item">
<image src="{{$item.show?$item.image_selected:$item.image}}" />
<text style="color: {{$item.color}}">{{$item.title}}</text>
</div>
</block>
</tab-bar>
</tabs>
</div>
</template>
<style>
.tab_bar {
width: 750px;
background-color: #f2f2f2;
}
.tab_item {
padding-top: 14px;
padding-bottom: 11px;
width: 171px;
height: 104.2px;
flex-direction: column;
align-items: center;
}
.tab_item image {
width: 50px;
height: 50px;
resize-mode: contain;
opacity: 0.5;
}
.tab_item image:active {
width: 50px;
height: 50px;
resize-mode: contain;
}
.tab_item text {
font-size: 21px;
margin-top: 10px;
}
.item-container {
justify-content: center;
}
</style>
data() {
return {
content: {
color_normal: '#878787',
color_active: '#656395',
show: true,
list: [
{
i: 0,
color: '#656395',
image: './img/icon_home.png',
image_selected: './img/icon_home_selected.png',
show: true,
title: '首頁'
},
{
i: 1,
color: '#878787',
image: './img/icon_shop.png',
image_selected: './img/icon_shop_selected.png',
show: false,
title: '店鋪'
},
{
i: 2,
color: '#878787',
image: './img/icon_cart.png',
image_selected: './img/icon_cart_selected.png',
show: false,
title: '購物車'
},
{
i: 3,
color: '#878787',
image: './img/icon_member.png',
image_selected: './img/icon_member_selected.png',
show: false,
title: '我的'
}
]
}
}
},
onShow() {
/* 使用全局定義的字段來控制路由跳轉後切換到底部欄中的位置 */
this.tab = this.$app.getAppData('MainTab') || 0;
this.changeTabactive({ index: this.tab });
},
/* 底部tabbar切換事件 */
changeTabactive: function (e) {
for (let i = 0; i < this.content.list.length; i++) {
let element = this.content.list[i];
element.show = false;
element.color = this.content.color_normal;
if (i === e.index) {
element.show = true;
element.color = this.content.color_active;
/* tabbar頁面中組件沒有onShow生命週期，需要自己在子組件中定義方法，手動的調用實現 */
if (typeof this.$child('tabs' + i).show == 'function') {
/* 這裏我是在子組件中定義了show方法 */
this.$child('tabs' + i).show();
}
this.$page.setTitleBar({
text: "demo",
backgroundColor: '#f2f2f2',
textColor: '#1a1a1a',
menu: true
});
this.tab = e.index;
}
}
}
/**
* 獲取 app 緩存的數據
* @param key
*/
getAppData(key) {
return this.dataCache[key]
},
/**
* 設置 app 緩存的數據
* @param key
* @param val
*/
setAppData(key, val) {
this.dataCache[key] = val
},
removeAppData(key) {
this.dataCache[key] = null;
}
/* index爲底部的tabbar索引值 */
this.$app.setAppData('MainTab', index);
router.push({
uri: 'Page_MainTab',
/* ___PARAMLAUNCH_FLAG\__1050+ 目前僅支持"clearTask"，在啓動目標頁面時會清除除此頁面外的其他頁面 */
params: {
___PARAM_LAUNCH_FLAG___: 'clearTask'
}
});
正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）
