快应用模拟Tabbar

快应用模拟Tabbar

原因：由于快应用没有内置的tabbar配置，所以需要我们根据小程序或者App的tabbar样式来模拟一个。这里就会用到组件的思维方式。这样我们就会用到快应用的block组件来切换不同的显示页面，当然底部任然需要我们用到tabs容器来模拟底部tabbar的样式，通过控制tabs里面的tab-bar的点击事件来识别应该切换的block块。
实例代码如下：

//第一步：组件引入
<import name="my" src="../My/index.ux"></import>
<import name="cart" src="../Cart/singleCart/index.ux"></import>
<import name="classify" src="../classifies/index.ux"></import>
<import name="home" src="../Home/index.ux"></import>
<import name="quan" src="../circle/index/index.ux"></import>

//第二步：代码块实现
<template>
    <div class="container">
        <block if="{{flag == 0}}">
            <!-- 首页 -->
            <home></home>
        </block>
        <block if="{{flag == 1}}">
            <!-- 分类 -->
            <classify></classify>
        </block>
        <block if="{{flag == 2}}">
            <!-- 购物车 -->
            <cart></cart>
        </block>
        <block if="{{flag == 3}}">
            <!-- 圈子 -->
            <quan></quan>
        </block>
        <block if="{{flag == 4}}">
            <!-- 个人中心 -->
            <my></my>
        </block>
        <!-- 底部导航栏 -->
        <tabs class="kite-tabs">
            <tab-bar class="footer-container">
                <!--遍历tabBar.list，生成导航栏-->
                <block for='tabBar.list'>
                    <div class="footer-item" onclick="setIndex($idx)">
                        <!--$idx为tabBar.list当前的索引值，以0开始-->
                        <!--如果当前页面被选中-->
                        <block if='{{$idx==flag}}'>
                            <!--icon-->
                            <image src="{{httpUrl+tabBar.list[$idx].selected_icon}}" class="footer-item-img"></image>
                            <!--页面标签值-->
                            <text class="tab-text" style="color: {{tabBar.list[$idx].selected_color}}">{{tabBar.list[$idx].name}}</text>
                        </block>
                        <!--当前页面未被选中-->
                        <block else>
                            <image src="{{httpUrl+tabBar.list[$idx].icon}}" class="footer-item-img"></image>
                            <text class="tab-text" style="color: {{tabBar.list[$idx].color}}">{{tabBar.list[$idx].name}}</text>
                        </block>
                    </div>
                </block>
            </tab-bar>
        </tabs>
    </div>
</template>
//第三步：css样式引入或者直接把样式写在这里
<style>
@import "./tabbar.css";
text {
  font-size: 40px;
  text-align: center;
}
</style>
//第四步：js代码的实现
<script>
/* eslint-disable semi */
/* eslint-disable indent */
module.exports = {
    private: {
        flag: 0,  //默认显示第一页
        tabBar: {  //tabbar的数据模拟
            list: [{
                name: '首页',
                title: '',
                icon: '/Common/images/1.png',
                color: '#666666',
                selected_color: '#FF4B4E',
                selected_icon: '/Common/images/11.png'
            }, {
                name: '分类',
                title: '分类',
                icon: '/Common/images/2.png',
                color: '#666666',
                selected_color: '#FF4B4E',
                selected_icon: '/Common/images/22.png'
            },
            {
                name: '购物车',
                title: '购物车',
                icon: '/Common/images/5.png',
                color: '#666666',
                selected_color: '#FF4B4E',
                selected_icon: '/Common/images/55.png'
            },
            {
                name: '圈子',
                title: '圈子',
                icon: '/Common/images/3.png',
                color: '#666666',
                selected_color: '#FF4B4E',
                selected_icon: '/Common/images/33.png'
            },
            {
                name: '我的',
                title: '我的',
                icon: '/Common/images/4.png',
                color: '#666666',
                selected_color: '#FF4B4E',
                selected_icon: '/Common/images/44.png'
            }]
        }
    },
    onInit() {  //初始化数据
        var that = this;
        that.$page.setTitleBar({ text: that.tabBar.list[that.flag].name })
        that.flag = that.$app.$def.global['flag']
    },
    setIndex: function (pos) {  //点击切换页面并当前点击的tabbar图片高亮
        var that = this;
        that.flag = pos;
        var title = that.tabBar.list[pos].title ? that.tabBar.list[pos].title : that.$app.$def.global['titleName'];
        that.$page.setTitleBar({ text: title });
    }
}
</script>