快應用之自定義tabbar(包含show和跳轉(zhuǎn)選中tabs)

發(fā)表時間：2021-4-30

發(fā)布人：葵宇科技

瀏覽次數(shù)：150

快應用中是沒有提供和小程序一樣的原生底部tabbar的，如果你一定要實現(xiàn)的話，就得自己模擬，但是自己模擬的話，有一些問題，比如：在自定義的tabbar中引入的組件是無法觸發(fā)自定義組件的onShow生命周期，需要自己手動觸發(fā)；再者，當你想從其他頁面中跳轉(zhuǎn)到tabbar頁面時，也是要自己重新寫方法來實現(xiàn)，直接跳轉(zhuǎn)無法實現(xiàn)；然后就是，在自定義的tabbar頁面中跳轉(zhuǎn)后，點擊返回，這個時候總是返回到首頁，這個無法控制，暫時也沒想到方法，即使你想自定義頭部中的返回，也無法控制，畢竟你還有手機本身的返回鍵

1.效果圖

2.頁面布局

使用tabs組件實現(xiàn)
布局

<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>

css樣式

<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() {
    /* 使用全局定義的字段來控制路由跳轉(zhuǎn)后切換到底部欄中的位置 */
    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生命周期，需要自己在子組件中定義方法，手動的調(diào)用實現(xiàn) */
            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;
        }
    }
}

在全局中定義的tab切換索引

/**
 * 獲取 app 緩存的數(shù)據(jù)
 * @param key
*/
getAppData(key) {
    return this.dataCache[key]
},
/**
  * 設置 app 緩存的數(shù)據(jù)
  * @param key
  * @param val
*/
setAppData(key, val) {
    this.dataCache[key] = val
},
removeAppData(key) {
    this.dataCache[key] = null;
}

在對應的組件里跳轉(zhuǎn)至底部tabbar頁面

/* index為底部的tabbar索引值 */
this.$app.setAppData('MainTab', index);
router.push({
    uri: 'Page_MainTab',
    /* ___PARAMLAUNCH_FLAG\__1050+    目前僅支持"clearTask"，在啟動目標頁面時會清除除此頁面外的其他頁面 */
    params: {
        ___PARAM_LAUNCH_FLAG___: 'clearTask'
    }
});