请教大神,使用mint-ui的tabbar 选中时怎么修改图标
发布于 5个月前 作者 lyb-vue 675 次浏览 来自 问答

<mt-tabbar v-model="selected" fixed> <mt-tab-item id="主页"> 图片链接 主页 </mt-tab-item> <mt-tab-item id="资讯"> 图片链接 资讯 </mt-tab-item> <mt-tab-item id="服务"> 图片链接 服务 </mt-tab-item> <mt-tab-item id="我的"> ![图片链接() 我的 </mt-tab-item> </mt-tabbar>

2 回复

直接给你上代码:

 <mt-tabbar v-model="selected" fixed>
<mt-tab-item id="主页">
       <img slot="icon" v-if="!(selected=== '主页')" src="非选中时的图片">
      <img slot="icon" v-if="selected=== '主页'" src="选中的图片">
主页
</mt-tab-item>
<mt-tab-item id="资讯">
      <img slot="icon" v-if="!(selected=== '资讯')" src="非选中时的图片">
       <img slot="icon" v-if="selected=== '资讯'" src="选中的图片">
资讯
</mt-tab-item>
<mt-tab-item id="服务">
      <img slot="icon" v-if="!(selected=== '服务')" src="非选中时的图片">
      <img slot="icon" v-if="selected=== '服务'" src="选中的图片">
服务
</mt-tab-item>
<mt-tab-item id="我的">
      <img slot="icon" v-if="!(selected=== '我的')" src="非选中时的图片">
      <img slot="icon" v-if="selected=== '"我的'" src="选中的图片">
我的
</mt-tab-item>
</mt-tabbar>
然后在data中:    
data () {
      return {
        selected: '主页'
      }
    }
比如你点击 “我的” 选项的时候,selected就等于  ’我的’ ,就--selected=== '"我的'为true,图就显示了

…我自己模仿豆瓣APP的项目tabbar就是用mint-ui写的,还有就是图片轮播了,感觉mint-ui不好用,文档太烂了,很多要自己摸索,很蛋疼。 我项目地址https://github.com/liangjilin/douban,可以参考参考,欢迎star

回到顶部