快应用底部tab栏组件

<template>
    <div class="navbar">
        <div class="navbar-item"
             onclick="handleGoToUriPage(i)"
             for="(i,n) in navbarlist">
            <image src="{{navbarIndex===i?n.selectIcon:n.icon}}"></image>
            <text style="{{navbarIndex===i?styleActive:styleStr}}">{{n.text}}</text>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            navbarIndex:0
        }
    },
    props: {
        navbarlist:{
            type:Array,
            default:[
                {
                    icon: '/common/image/tab_home1.png',    //默认图标路径
                    selectIcon: '/common/image/tab_home_pre1.png',  //选择的图标路径    
                    text: '借钱'    //显示的文本信息
                },
                {
                    icon: '/common/image/tab_search.png',
                    selectIcon: '/common/image/tab_search_pre.png',
                    text: '还钱'
                },
                {
                    icon: '/common/image/tab_mine.png',
                    selectIcon: '/common/image/tab_mine_pre.png',
                    text: '我的'
                },
            ]
        },
        styleStr:{
            type:String,
            default:`color:#000`
        },
        styleActive:{
            type:String,
            default:`color:red`
        }
    },
    handleGoToUriPage(i) {
        if(this.navbarIndex===i) return
        this.navbarIndex = i
        this.$emit('toggle', i)
    }
}
</script>
<style lang="less" scoped>
.navbar {
  height: 110px;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  .navbar-item {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .text-active {
      color: rgb(247, 56, 57);
    }
  }
}
</style>