快应用之自定义tabbar(包含show和跳转选中tabs)

快应用中是没有提供和小程序一样的原生底部tabbar的，如果你一定要实现的话，就得自己模拟，但是自己模拟的话，有一些问题，比如：在自定义的tabbar中引入的组件是无法触发自定义组件的onShow生命周期，需要自己手动触发；再者，当你想从其他页面中跳转到tabbar页面时，也是要自己重新写方法来实现，直接跳转无法实现；然后就是，在自定义的tabbar页面中跳转后，点击返回，这个时候总是返回到首页，这个无法控制，暂时也没想到方法，即使你想自定义头部中的返回，也无法控制，毕竟你还有手机本身的返回键

1.效果图

2.页面布局

• 使用tabs组件实现
• 布局

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

• 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: '首页'
                },
                {
                    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;
        }
    }
}

• 在全局中定义的tab切换索引

/**
 * 获取 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;
}

• 在对应的组件里跳转至底部tabbar页面

/* index为底部的tabbar索引值 */
this.$app.setAppData('MainTab', index);
router.push({
    uri: 'Page_MainTab',
    /* ___PARAMLAUNCH_FLAG\__1050+    目前仅支持"clearTask"，在启动目标页面时会清除除此页面外的其他页面 */
    params: {
        ___PARAM_LAUNCH_FLAG___: 'clearTask'
    }
});

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

• 往期推荐：

  • 实现单行及多行文字超出后加省略号
  • 判断iOS和Android及PC端
  • 使用vue开发移动端管理后台
  • 画三角形