快應用模擬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>