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

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

1.效果图

2.页面布局

• 使用tabs组件实现
• 布局

• css样式

• 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开发移动端管理后台
  • 画三角形