vue-cli移动端底部路由跳转图片切换

系统管理员 2022-03-07 07:08 282阅读 0赞

效果图：

![20190316134408352.png][]

![20190316134748716.png][]

说详细点就是：点击“我的”，“我的”图片切换，“首页”图片也切换，反之效果互换。

核心源码：

<template>
      <div>
       <router-view></router-view>
        <div class="fixation">
          <footer>
            <router-link :to="{path:'index'}">
              <div class="index-my" v-on:click="clickIndex">
                <img :src='indexUrl'>
                <span>首页</span>
              </div>
            </router-link>
            <div>
              <img src="../assets/images/add.png" alt="增加">
            </div>
            <router-link :to="{path:'my'}">
              <div class="index-my" v-on:click="clickMy">
               <img :src="myUrl" alt="我的图片">
                <span>我的</span>
              </div>
            </router-link>
          </footer>
        </div>
      </div>
    </template>
    
    <script>
      import index from './index.vue'
      import my from './my.vue'
      export default{
        data(){
          return {
           indexUrl: require('../assets/images/home-y.png'), myUrl: require('../assets/images/my-n.png'),
            imgStatus: true
          }
        },
        components: {
          index,
          my
        },
       methods: { clickIndex: function () { if (this.imgStatus) { this.indexUrl = require('../assets/images/home-y.png'), this.myUrl = require('../assets/images/my-n.png') } else { this.indexUrl = require('../assets/images/home-y.png'), this.myUrl = require('../assets/images/my-n.png') } }, clickMy: function () { if (this.imgStatus) { this.indexUrl = require('../assets/images/home-n.png'), this.myUrl = require('../assets/images/my-y.png') } else { this.indexUrl = require('../assets/images/home-n.png'), this.myUrl = require('../assets/images/my-y.png') } this.imgStatus = !this.imgStatus } }
      }
    </script>
    
    <style scoped>
      footer {
        display: flex;
        justify-content: space-around;
        align-items: center;
        /*position: fixed;*/
      }
    
      .index-my {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: .3rem;
        color: #3C83DD;
      }
    
      .index-my img {
        width: 1.5rem;
        height: 1.5rem;
      }
    
      .fixation {
        position: fixed;
        width: 100%;
        bottom: 0;
        background-color: white;
      }
    </style>

[20190316134408352.png]: /images/20220307/b34285cbebb94840891d7e66c6eecc18.png
[20190316134748716.png]: /images/20220307/152d10ac87404a41933bd327ab7c7557.png