Web App Tabbar

Love The Way You Lie 2023-02-18 01:44 12阅读 0赞

<template>
        <div class="tab">
            <ul v-for="item in tabData" :key="item.name" class="tabItem">
                <li class="tabTo" @click="tabClick(item.path)">
                    <img class="tabImg" :src="item.path== $route.path?item.activeImg:item.img">
                    <div :class="{'active':item.path== $route.path}"  class="tabText">{
       {item.name}}</div>
                </li>
            </ul>
        </div>
    </template>
    <script>
     export default {
        name: 'Tabbar',
        data () {
          return {
            tabData: [
              {
                path: '/',
                img: require('./../assets/icon/index.png'),
                activeImg: require('./../assets/icon/index1.png'),
                name: '首页'
              },
              {
                path: '/Fenlei',
                img: require('./../assets/icon/class.png'),
                activeImg: require('./../assets/icon/class1.png'),
                name: '分类'
              },
              {
                path: '/car',
                img: require('./../assets/icon/car.png'),
                activeImg: require('./../assets/icon/car.png'),
                name: '购物车'
              },
              {
                path: '/Mine',
                img: require('./../assets/icon/mine1.png'),
                activeImg: require('./../assets/icon/mine.png'),
                name: '我的'
              }
            ]
          }
        },
        methods: {
          tabClick: function (path) {
            this.$router.push(path)
          }
        }
      }
    </script>
    
    <style lang="scss" scoped>
    .tab{
        width: 100%;
        height: 90px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid #e5e5e5;
        padding: 10px 0;
        background: #fff;
        .tabItem{
           
            img{
                width: 48px;
            }
            .tabText{
                font-size: 18px;
                color: #707070;
                margin-left: 5px;
            }
            .active{
                color: crimson;
                margin-left: 5px;
            }
        }
    }
    </style>