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;

}

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181121G0JR5600?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券