快应用底部导航

效果：


参照组件tab https://doc.quickapp.cn/widgets/tabs.html

代码：

<!--引入子页面-->
<import name="About" src="../About/index.ux"</import>
<import name="My" src="../My/index.ux"></import>
 
<template>
    <div class="index-page">
        <tabs class="tabs" index="{{curPage}}" onchange="changeTanActive">
        
<!--tab-bar 底部导航-->
            <tab-bar class="foot-bar" mode="fixed">
                
                <block for={{tabBar}}>
                    <div class="foot-list">
                        <block if="{{$idx === curPage}}">
                            <image src="{{$item.selectIcon}}"></image>
                            <text style="color: {{$item.selectColor}}">{{$item.text}}</text>
                        </block>
                        
                        <block else>
                            <image src="{{$item.normalIcon}}"></image>
                            <text style="color: {{$item.normalColor}}">{{$item.text}}</text>
                        </block>
                    </div>
                </block>
                
            </tab-bar>

			<!--tab-content 内容 -->
			<!--使用show 不刷新 使用if刷新 -->
            <tab-content>
                <block show="{{curPage === 0}}">
                    <About></About>
                </block>
                <block show="{{curPage === 1}}">
                    <My></My>
                </block>
               
            </tab-content>
        </tabs>
    </div>
</template>

<script>
    export default {
        private: {
          curPage: 0,
          tabBar: [{
              text: "首页",
              normalIcon: "../Common/home.png",
              normalColor: "#999",
              selectColor: "#1afa29",
              selectIcon: "../Common/selected_home.png",
          },{
              text: "个人中心",
              normalIcon: "../Common/my.png",
              normalColor: "#999",
              selectColor: "#1afa29",
              selectIcon: "../Common/selected_my.png",
          }]
        },

        onInit() {
          
        },

        changeTanActive (e) {
            console.log(e.index)
            this.curPage = e.index;
        }
    }
</script>

<style>
    .index-page{

    }

    .foot-bar{
        position:fixed;
        bottom:0;
        background-color:#f2f2f2;
    }
    .foot-bar image{
        height:40px;
    }

    .foot-list{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>

参考 ：https://blog.csdn.net/quickapp/article/details/93149715