vue2.x + vux採坑總結（一）

一、<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 到表達式。

 

 二、vuejs 中的.native原生事件是什麼意思？如何使用？

意思就是當你給一個vue組件綁定事件時候，要加上native！若是是普通的html元素！就不須要

補充：

   原生就相似於你直接用

$element.addEventListener(click, callback);

    綁定事件。 

 router-link會阻止click事件，你能夠試試只用click不用native,事件是不會觸發的。而a標籤不會阻止。