There is no native bottom tabbar in the fast application, if you have to implement it, you have to simulate it yourself. But if you do, there are some problems. For example, the component introduced in the custom tabbar can not trigger the onShow life cycle of the custom component, so you need to trigger it manually. Moreover, when you want to jump from other pages to tabbar pages, you have to rewrite the method to achieve it, and direct jump can not be achieved; then, after jumping in the custom tabbar pages, click back, and then always return to the home page, which is uncontrollable, temporarily did not think of a method, even if You want to customize the return in your head, and you can't control it. After all, you still have the return key of the phone itself.

1. effect picture

2. Page layout

• Implementing with tabs component
• layout

<template>
    <div class="container">
        <tabs onchange="changeTabactive">
            <!-- Components for each page -->
            <tab-content>
                <block for="content.list">
                    <div class="item-container">
                        <pagehome if="{{$item.title=='home page'?true:false}}" id="tabs{{$item.i}}"></pagehome>
                        <pageshop if="{{$item.title=='shop'?true:false}}" id="tabs{{$item.i}}"></pageshop>
                        <pagecart if="{{$item.title=='Shopping Cart'?true:false}}" id="tabs{{$item.i}}"></pagecart>
                        <pageuser if="{{$item.title=='My'?true:false}}" id="tabs{{$item.i}}"></pageuser>
                    </div>
                </block>
            </tab-content>
            <!-- Bottom tabbar Button -->
            <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

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

• js

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: 'home page'
                },
                {
                    i: 1,
                    color: '#878787',
                    image: './img/icon_shop.png',
                    image_selected: './img/icon_shop_selected.png',
                    show: false,
                    title: 'shop'
                },
                {
                    i: 2,
                    color: '#878787',
                    image: './img/icon_cart.png',
                    image_selected: './img/icon_cart_selected.png',
                    show: false,
                    title: 'Shopping Cart'
                },
                {
                    i: 3,
                    color: '#878787',
                    image: './img/icon_member.png',
                    image_selected: './img/icon_member_selected.png',
                    show: false,
                    title: 'My'
                }
            ]
        }
    }
},
onShow() {
    /* Use globally defined fields to control routing jumps and switch to the bottom column */
    this.tab = this.$app.getAppData('MainTab') || 0;
    this.changeTabactive({ index: this.tab });
},
/* Bottom tabbar switch event */
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 There is no onShow life cycle for components in the page, so you need to define methods in the sub-components and call them manually. */
            if (typeof this.$child('tabs' + i).show == 'function') {
                /* Here I define the show method in the subcomponent */
                this.$child('tabs' + i).show();
            }
            this.$page.setTitleBar({
                text: "demo",
                backgroundColor: '#f2f2f2',
                textColor: '#1a1a1a',
                menu: true
            });
            this.tab = e.index;
        }
    }
}

• tab switching index defined globally

/**
 * Getting app cached data
 * @param key
*/
getAppData(key) {
    return this.dataCache[key]
},
/**
  * Setting up app cached data
  * @param key
  * @param val
*/
setAppData(key, val) {
    this.dataCache[key] = val
},
removeAppData(key) {
    this.dataCache[key] = null;
}

• Jump to the bottom tabbar page in the corresponding component

/* index Index values for tabbar at the bottom */
this.$app.setAppData('MainTab', index);
router.push({
    uri: 'Page_MainTab',
    /* ___PARAMLAUNCH_FLAG\__1050+    Currently only "clearTask" is supported, and when the target page is launched, other pages except this page will be cleared. */
    params: {
        ___PARAM_LAUNCH_FLAG___: 'clearTask'
    }
});

In the process of studying hard, if it is helpful to your study, leave your mark.

• Recommendations:

  • Achieving single-line and multi-line text with ellipsis after exceeding
  • Judging iOS, Android and PC
  • Using vue to develop mobile management background
  • Draw triangle