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

javascript/jquery

浏览数:72

2019-10-3

AD:资源代下载服务

快应用中是没有提供和小程序一样的原生底部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'
    }
});

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

作者:ZJW0215