zoukankan      html  css  js  c++  java
  • vue2.x + vux采坑总结(一)

    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 到表达式。

     2、vuejs 中的.native原生事件是什么意思?如何使用?

    意思就是当你给一个vue组件绑定事件时候,要加上native!如果是普通的html元素!就不需要

    补充:

       原生就类似于你直接用

    $element.addEventListener(click, callback);

        绑定事件。 

     router-link会阻止click事件,你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。

  • 相关阅读:
    linux service 例子
    YII2自动初始化脚本
    ubuntu 如何在命令行打开当前目录
    mysql 储存过程
    Mysql 随笔记录
    Lack of free swap space on Zabbix server
    意外发现PHP另一个显示转换类型 binary
    常用的排序代码
    线程的实现方式之内核支持线程和用户级线程
    寻找二叉树中的最低公共祖先结点----LCA(Lowest Common Ancestor )问题(递归)
  • 原文地址:https://www.cnblogs.com/zhangym118/p/8494362.html
Copyright © 2011-2022 走看看