vue-webapp tabbar组件使用

vue-webapp中的坑 使用Mint UI tabbar点击之后图片改变的方法

vue-webapp中的坑 （mint-ui很坑的，需要注意）Mint UI tabbar点击之后图片改变的方法

下图就是Mint UI的tabbar组件代码

htm代码：

投资

关注

我的

js组件代码：

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;

}

},

}

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;

}

.footer .mint-tabbar > .mint-tab-item.is-selected {

background-color: #fff;

}

.footer .is-selected .mint-tab-item-label {

color: #ec4748;

}