快应用底部tab栏组件

小咪咪 2023-07-16 02:32 39阅读 0赞

<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>