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标签不会阻止。
vue2.x + vux采坑总结(一)的更多相关文章
- Cloudera Manager 5.9 和 CDH 5.9 离线安装指南及个人采坑填坑记
公司的CDH早就装好了,一直想自己装一个玩玩,最近组了台电脑,笔记本就淘汰下来了,加上之前的,一共3台,就在X宝上买了CPU和内存升级了下笔记本,就自己组了个集群. 话说,好想去捡垃圾,捡台8核16线 ...
- angular采坑记录
在angular中会遇到一些莫名的问题,导致不能完成想要的功能,可能是某项用法使用错误,或许是angular相对应不支持,或者是我们功力根本就没有达到.为了在每次采坑之后能有所收获,再遇到时能理解其根 ...
- 分布式改造剧集之Redis缓存采坑记
Redis缓存采坑记 前言 这个其实应该属于分布式改造剧集中的一集(第一集见前面博客:http://www.cnblogs.com/Kidezyq/p/8748961.html),本来按照顺序 ...
- 采坑:python base64
需求: 读取文本内容,对字符串进行base64加密 >>> str = 'aaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbbbbbbbbbb\nccc ...
- Hadoop环境搭建--Docker完全分布式部署Hadoop环境(菜鸟采坑吐血整理)
系统:Centos 7,内核版本3.10 本文介绍如何从0利用Docker搭建Hadoop环境,制作的镜像文件已经分享,也可以直接使用制作好的镜像文件. 一.宿主机准备工作 0.宿主机(Centos7 ...
- Spring Cloud Config采坑记
1. Spring Cloud Config采坑记 1.1. 问题 在本地运行没问题,本地客户端服务能连上本地服务端服务,可一旦上线,发现本地连不上线上的服务 服务端添加security登录加密,客户 ...
- rabbitmq在ios中实战采坑
1. rabbitmq在ios中实战采坑 1.1. 问题 ios使用rabbitmq连接,没过多久就断开,并报错.且用android做相同的步骤并不会报错,错误如下 Received connecti ...
- 从源码看Spring Security之采坑笔记(Spring Boot篇)
一:唠嗑 鼓捣了两天的Spring Security,踩了不少坑.如果你在学Spring Security,恰好又是使用的Spring Boot,那么给我点个赞吧!这篇博客将会让你了解Spring S ...
- Charles 抓包工具安装和采坑记录
Charles 抓包工具安装和采坑记录 网络抓包是解决网络问题的第一步,也是网络分析的基础.网络出现问题,第一步肯定是通过抓包工具进行路径分析,看哪一步出现异常.做网络爬虫,第一步就是通过抓包工具对目 ...
随机推荐
- PHP索引数组+unset使用不当导致的问题
转自先知社区 https://xz.aliyun.com/t/2443 0x00前言 通常网站后台可以配置允许上传附件的文件类型,一般登录后台,添加php类型即可上传php文件getshell.但是, ...
- Oracle数据库用户锁定原因以及处理方式(ORA-28000)
现场在实施过程中,基于安全考虑(用户名和密码之前暴露给其他公司了),需要对用户密码进行修改. 修改过程很简单(alter user [username] identified by [password ...
- PHP7 学习笔记(十一)使用phpstudy快速配置一个虚拟主机
说明:为了windows本地开发php方便,这里推荐使用PHP集成环境phpstudy. 目的:使用域名访问项目(tinywan.test) 1.官网:http://www.phpstudy.net ...
- 混合app开发--js和webview之间的交互总结
使用场景:原生APP内嵌套H5页面,app使用的是webview框架进行嵌套 这样就存在两种情况 1.原生app调用H5的方法 2.H5调用app的方法 分别讲解下,其实app与H5之间的交互式非常简 ...
- retry示例
#!/usr/bin/python2.7 # -*- coding: utf-8 -*- import time import exceptions def func(): # a,b = None ...
- Silverlight设计器——Path
如下图,在设计一个InfoWindow的时候,顶栏的关闭按钮没有出现.观察了半天,也没有弄明白.无意中,拖动一个几乎透明的信息框,突然就出现了关闭的按钮.原来,那个信息框只是一个Path,它遮住了关闭 ...
- 使用java poi解析表格
@Test public void poi() throws Exception { InputStream inputStream=new FileInputStream("C:\\Use ...
- 小程序开发 从简单的 crud 开始
关键字:“小程序 API” [WXML 完成布局] <view> == <div> {{}} == <%= %> ejs | jsp2 <block wx: ...
- 深入理解jQuery中的each方法
写在前面 我们先回顾一下数组中的forEach方法吧.在数组的实例上有个forEach方法供所有实例使用,forEach里面接收一个回调函数,而且回调函数默认接收三个参数:当前项,索引,数组 .for ...
- python 的基础 学习第十天函数的初始
1,什么是函数,函数就是封装一个功能. 怎么定义函数. # def my_len():#def 是关键字,定义一个一个函数.#my_len():就是函数名,必须和关键字加一个空格,后面加括号和冒号.d ...