码迷,mamicode.com
首页 > 其他好文 > 详细

vue2.x + vux采坑总结(一)

时间:2018-03-02 18:37:44      阅读:2033      评论:0      收藏:0      [点我收藏+]

标签:strong   2.x   bubuko   cli   nav   temp   实现   tabbar   换问题   

1、<tab-bar> 切换时,iocn高亮跟着切换问题

vux的Tabbar组件是用来实现底部tab栏,详情见官网文档 ,

实现实例截图:

技术分享图片

 

代码如下,控制高亮的是代码凸显部分:selecetd 

<template>
  <div>
    <group>
      <cell is-link title="Simple" link="/component/tabbar-simple"></cell>
      <cell is-link title="Switch icons" link="/component/tabbar-icon"></cell>
    </group>
    <tabbar>
      <tabbar-item>
        <img slot="icon" src="../assets/demo/icon_nav_button.png">
        <span slot="label">Wechat</span>
      </tabbar-item>
      <tabbar-item show-dot>
        <img slot="icon" src="../assets/demo/icon_nav_msg.png">
        <span slot="label">Message</span>
      </tabbar-item>
      <tabbar-item selected link="/component/demo">
        <img slot="icon" src="../assets/demo/icon_nav_article.png">
        <span slot="label">Explore</span>
      </tabbar-item>
      <tabbar-item badge="2">
        <img slot="icon" src="../assets/demo/icon_nav_cell.png">
        <span slot="label">News</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

 

  如果不同tab进行切换时,则需要selected也跟着切换,所以需要动态的控制selected的值。(思考过在元素上添加click事件,单没成功,还得再研究下),现有解决办法如下:

<tabbar-item :selected="$route.path == ‘/component/demo‘" link="/component/demo">
        <img slot="icon" src="../assets/demo/icon_nav_article.png">
        <span slot="label">Explore</span>
</tabbar-item>

:是v-bind的缩写,用来动态地绑定一个或多个特性,或一个组件 prop 到表达式。

 

vue2.x + vux采坑总结(一)

标签:strong   2.x   bubuko   cli   nav   temp   实现   tabbar   换问题   

原文地址:https://www.cnblogs.com/zhangym118/p/8494362.html

(2)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!