mint-ui的tabbar点击时如何切换图片

最新推荐文章于 2020-11-18 09:39:40 发布

春晨秋遇

最新推荐文章于 2020-11-18 09:39:40 发布

阅读量279

点赞数

分类专栏： Vue 文章标签： tabbar切换图片

本文链接：https://blog.csdn.net/gypzp/article/details/103515335

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天写项目 , 遇到使用 mint-ui 时怎么切换 tabbar 图片的问题 , 就上网查了一下 , 有很多方法 , 为方便自己以后使用 , 故选择了较简单的

先看 html 代码 :

<mt-tabbar v-model="selected">
    <mt-tab-item id="首页" @click.native="toggleTab('A')">
        <router-link to="/enty/index">
            <img src="../../images/tabbar1-1.png" v-show="!s.isA">
            <img src="../../images/tabbar2-1.png" v-show="s.isA">
            首页
        </router-link>
    </mt-tab-item>
    <mt-tab-item id="分类" @click.native="toggleTab('B')">
        <router-link to="/enty/classify">
            <img src="../../images/tabbar1-2.png" v-show="!s.isB">
            <img src="../../images/tabbar2-2.png" v-show="s.isB">
            分类
        </router-link>
    </mt-tab-item>
    <mt-tab-item id="购物车" @click.native="toggleTab('C')">
        <router-link to="/enty/car">
            <img src="../../images/tabbar1-3.png" v-show="!s.isC">
            <img src="../../images/tabbar2-3.png" v-show="s.isC">
            购物车
        </router-link>
    </mt-tab-item>
    <mt-tab-item id="个人" @click.native="toggleTab('D')">
        <router-link to="/enty/person">
            <img src="../../images/tabbar1-4.png" v-show="!s.isD">
            <img src="../../images/tabbar2-4.png" v-show="s.isD">
            个人
        </router-link>
    </mt-tab-item>
</mt-tabbar>

再看 js 代码 :

data(){
    return {
        selected: "首页",
        s: { //分别对应四个 tab
            isA: !0, //非0代表红色图片
            isB: !1, //非1代表黑色图片
            isC: !1,
            isD: !1
        }
    }
},
methods: {
    clear: function(state) { //清空状态
    for (var k in this.s) //循环s将每项值都重新设置成!1,即黑色图
        this.$set(this.s, k, !1);
    },
    toggleTab: function(state) {  //点击更换图标
        this.clear(state); // 选中前先重置其他tab
        if (this.s["is" + state]) {//如果没有选中则取反显示为黑图
            this.$set(this.s, ["is" + state], !1);
        }else{
            this.$set(this.s, ["is" + state], !0);//如果选中则显示红色图
        }
    }
}