Web App Tabbar

最新推荐文章于 2024-07-24 19:41:23 发布

原创最新推荐文章于 2024-07-24 19:41:23 发布 · 195 阅读

CC 4.0 BY-SA版权

本文详细解析了Vue中Tabbar组件的实现原理与代码结构，包括动态路由切换、图片加载及样式设置等关键技术点。

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