vue-webapp 中的坑 （mint-ui很坑的，需要注意）Mint UI tabbar 点击之后图片改变的方法
下图就是Mint UI的tabbar组件代码
htm代码：
<template>
<mt-tabbar v-model="tabBar" fixed>
<mt-tab-item id="Invest" @click.native="showInvest">
<router-link to="/" style=" text-decoration: none; color: #989898;">
<img src="../assets/ios/icon/Investment@2x.png" v-show="isshow">
<img src="../assets/ios/icon/Investment-1@2x.png" v-show="is_show">
投资
</router-link>
</mt-tab-item>
<mt-tab-item id="fllow" @click.native="showFllow">
<img src="../assets/ios/icon/follow@2x.png" v-show="isshow1">
<img src="../assets/ios/icon/follow-1@2x.png" v-show="is_show1">
关注
</mt-tab-item>
<mt-tab-item id="person" @click.native="showPerson">
<router-link to="/Login" style=" text-decoration: none; color: #989898;">
<img src="../assets/ios/icon/person@2x.png" v-show="isshow2">
<img src="../assets/ios/icon/person-1@2x.png" v-show="is_show2">
我的
</router-link>
</mt-tab-item>
</mt-tabbar>
</template>
js组件代码：
<script>
export default {
name: 'tabBar',
data() {
return {
tabBar: 'Invest',
selected:'',
isshow:false,
is_show:true,
isshow1:true,
is_show1:false,
isshow2:true,
is_show2:false,
};
},
methods: {
showInvest:function(){
this.isshow=false;
this.is_show=!this.isshow;
this.$options.methods.UnshowFllow.bind(this)();
this.$options.methods.UnshowPerson.bind(this)();
},
showFllow:function(){
this.isshow1=false;
this.is_show1=true;
this.$options.methods.UnshowInvest.bind(this)();
this.$options.methods.UnshowPerson.bind(this)();
},
showPerson:function(){
this.isshow2=false;
this.is_show2=true;
this.$options.methods.UnshowInvest.bind(this)();
this.$options.methods.UnshowFllow.bind(this)();
},
UnshowInvest:function(){
this.isshow=true;
this.is_show=false;
},
UnshowFllow:function(){
this.isshow1=true;
this.is_show1=false;
},
UnshowPerson:function(){
this.isshow2=true;
this.is_show2=false;
}
},
}
</script>
css组件样式代码：
/* 底部tabbar */
.footer .mint-tabbar {
background-color: #fff;
}
.footer .mint-tabbar.is-fixed {
height: 4.9rem;
line-height: 4.9rem;
border-top: 1px solid #e4e4e4;
}
.footer .mint-tab-item {
margin-top: 0.8rem;
}
.footer .mint-tab-item-label {
color: #989898;
font-size: 1rem;
font-weight: normal;
line-height: 1;
}
.footer img {
width: 2rem;
height: 2rem;
font-size: 2rem;
display: block;
margin: 0 auto;
margin-bottom: 0.45rem;
}
.footer .mint-tabbar > .mint-tab-item.is-selected {
background-color: #fff;
}
.footer .is-selected .mint-tab-item-label {
color: #ec4748;
}
以上仅供参考：想了解更多请关注微信公众号：
来源：CSDN
作者：yy.n
链接：https://blog.csdn.net/qq_41646249/article/details/82698086