Vant Tab标签页
引入
import Vue from 'vue';
import { Tab, Tabs } from 'vant';Vue.use(Tab);
Vue.use(Tabs);
代码演示
基础用法
通过v-model绑定当前激活标签对应的索引值,默认情况下启用第一个标签
<van-tabs v-model="active"><van-tab title="标签 1">内容 1</van-tab><van-tab title="标签 2">内容 2</van-tab><van-tab title="标签 3">内容 3</van-tab><van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
export default {data() {return {active: 2};}
}
通过名称匹配
在标签指定name属性的情况下,v-model的值为当前标签的name
<van-tabs v-model="activeName"><van-tab title="标签 1" name="a">内容 1</van-tab><van-tab title="标签 2" name="b">内容 2</van-tab><van-tab title="标签 3" name="c">内容 3</van-tab>
</van-tabs>
export default {data() {return {activeName: 'a'};}
}
标签栏滚动
标签数量超过 4 个时,标签栏可以在水平方向上滚动,切换时会自动将当前标签居中
<van-tabs><van-tab v-for="index in 8" :title="'标签 ' + index">内容 {{ index }}</van-tab>
</van-tabs>
禁用标签
设置disabled属性即可禁用标签。如果需要监听禁用标签的点击事件,可以在van-tabs上监听disabled事件
<van-tabs @disabled="onClickDisabled"><van-tab title="标签 1">内容 1</van-tab><van-tab title="标签 2" disabled>内容 2</van-tab><van-tab title="标签 3">内容 3</van-tab>
</van-tabs>
import { Toast } from 'vant';export default {methods: {onClickDisabled(name, title) {Toast(name + '已被禁用');}}
};
样式风格
Tab支持两种样式风格:line和card,默认为line样式,可以通过type属性修改样式风格
<van-tabs type="card"><van-tab title="标签 1">内容 1</van-tab><van-tab title="标签 2">内容 2</van-tab><van-tab title="标签 3">内容 3</van-tab>
</van-tabs>
点击事件
可以在van-tabs上绑定click事件,事件传参为标签对应的索引和标题
<van-tabs @click="onClick"><van-tab title="标签 1">内容 1</van-tab><van-tab title="标签 2">内容 2</van-tab>
</van-tabs>
import { Toast } from 'vant';export default {methods: {onClick(name, title) {Toast(title);}}
};
粘性布局
通过sticky属性可以开启粘性布局,粘性布局下,当 Tab 滚动到顶部时会自动吸顶
<van-tabs v-model="active" sticky><van-tab v-for="index in 4" :title="'选项 ' + index">内容 {{ index }}</van-tab>
</van-tabs>
自定义标签
通过 title 插槽可以自定义标签内容
<van-tabs v-model="active"><van-tab v-for="index in 2"><div slot="title"><van-icon name="more-o" />选项</div>内容 {{ index }}</van-tab>
</van-tabs>
切换动画
通过animated属性可以开启切换标签内容时的转场动画
<van-tabs v-model="active" animated><van-tab v-for="index in 4" :title="'选项 ' + index">内容 {{ index }}</van-tab>
</van-tabs>
滑动切换
通过swipeable属性可以开启滑动切换标签页
<van-tabs v-model="active" swipeable><van-tab v-for="index in 4" :title="'选项 ' + index">内容 {{ index }}</van-tab>
</van-tabs>
滚动导航
通过scrollspy属性可以开启滚动导航模式,该模式下,内容将会平铺展示
<van-tabs v-model="active" scrollspy sticky><van-tab v-for="index in 8" :title="'选项 ' + index">内容 {{ index }}</van-tab>
</van-tabs>
API
Tabs Props
v-model | 绑定当前选中标签的标识符 | number | string |
0
|
type |
样式风格类型,可选值为card
|
string |
line
|
color | 标签主题色 | string |
#ee0a24
|
background | 标签栏背景色 | string |
white
|
duration | 动画时间,单位秒 | number | string |
0.3
|
line-width |
底部条宽度,默认单位px
|
number | string |
auto
|
line-height |
底部条高度,默认单位px
|
number | string |
3px
|
animated | 是否开启切换标签内容时的转场动画 | boolean |
false
|
border |
是否显示标签栏外边框,仅在type="line" 时有效
|
boolean |
true
|
ellipsis | 是否省略过长的标题文字 | boolean |
true
|
sticky | 是否使用粘性定位布局 | boolean |
false
|
swipeable | 是否开启手势滑动切换 | boolean |
false
|
lazy-render | 是否开启延迟渲染(首次切换到标签时才触发内容渲染) | boolean |
true
|
scrollspy v2.3.0
|
是否开启滚动导航 | boolean |
false
|
offset-top |
粘性定位布局下与顶部的最小距离,单位px
|
number | string |
0
|
swipe-threshold | 滚动阈值,标签数量超过阈值时开始横向滚动 | number | string |
4
|
title-active-color | 标题选中态颜色 | string | - |
title-inactive-color | 标题默认态颜色 | string | - |
Tab Props
title | 标题 | string | - |
disabled | 是否禁用标签 | boolean |
false
|
dot v2.3.0
|
是否在标题右上角显示小红点 | boolean |
false
|
info v2.3.0
|
标题右上角徽标的内容 | number | string | - |
name v2.0.6
|
标签名称,作为匹配的标识符 | number | string | 标签的索引值 |
url v2.2.1
|
点击后跳转的链接地址 | string | - |
to v2.2.1
|
点击后跳转的目标路由对象,同 vue-router 的 to 属性 | string | object | - |
replace v2.2.1
|
是否在跳转时替换当前页面历史 | boolean |
false
|
title-style v2.2.14
|
自定义标题样式 | any | - |
Tabs Events
click | 点击标签时触发 | name:标识符,title:标题 |
change | 当前激活的标签改变时触发 | name:标识符,title:标题 |
disabled | 点击被禁用的标签时触发 | name:标识符,title:标题 |
rendered v2.3.0
|
标签内容首次渲染时触发(仅在开启延迟渲染后触发) | name:标识符,title:标题 |
scroll | 滚动时触发,仅在 sticky 模式下生效 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
Tabs 方法
通过 ref 可以获取到 Tabs 实例并调用实例方法,详见 组件实例方法
resize | 外层元素大小变化后,可以调用此方法来触发重绘 | - | void |
Tabs Slots
nav-left | 标题左侧内容 |
nav-right | 标题右侧内容 |
Tab Slots
default | 标签页内容 |
title | 自定义标题,不支持动态渲染 |
Vant Tab标签页相关推荐
- Vant Tab标签页+下拉刷新+上拉加载
Vant Tab标签页+下拉刷新+上拉加载 <template><div class="invoicePickupBox"><div class=&q ...
- [Vant] van-tabs标签页吸顶\/粘性布局在移动端适配上的一些尝试
官方文档地址: Vant Tab标签页文档示例 问题描述 在开发中使用Vant标签页van-tabs组件时,遇到了一个关于标签页的粘性布局的屏幕适配问题. 原因是van-tabs的offset-top ...
- 微信小程序|Tab标签页
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 问题描述 在使用小 ...
- html tab与jQuery,js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 *{margin: 0;padding: 0;} #myul li {li ...
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- JavaScript面向对象—— 动态创建tab标签页
昨天呢,介绍了js中类的概念,以及使用类创建对象的过程.今天就用js中的类实现一个小的功能,动态添加.删除标签页.emmmmm,也有点像tab栏切换,不过比tab栏切换多了添加和删除的功能. 案例说明 ...
- vue实现多个tab标签页的切换与关闭
1.实现效果 2.实现原理 vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存页,当前路由的状态管理. 将vuex中的数据保存到sessionStorage中,避免 ...
- 点击链接跳转到新页面并显示对应的tab标签页切换
原理:从页面A跳转到页面B,则在A页面中跳转页面时传值,然后在B页面中写js获取该值并做对应的操作 附:tab标签页的制作链接:https://mp.csdn.net/postedit/1010531 ...
- vue + element 中tab标签页拖拽(拖动) sortablejs插件实现
tab签拖拽更换位置 业务需求 效果图 1.npm安装sortable.js 2.html代码块 3. 在script下导入 4.js逻辑片段(**const el 必须找到自己拖拽的那一列** ) ...
最新文章
- Linux之重定向命令
- liunx下的DNS配置
- openStack高可用性和灾备方案
- 【v3.6.2】iNeuOS工业互联网操作系统,发布实时存储方式:实时存储、变化存储、定时存储,设备振动状态和电能状态监测驱动...
- 程序员如何面对 HR 面试的 40 个问题
- Java Collections unmodifiableCollection()方法与示例
- java swt最小化到托盘_SWT 中实现最小化到托盘图标,并只能通过托盘的弹出菜单关闭程序...
- matlab error函数_深度对比Python(Numpy,Scipy)与Matlab的数值精度
- ca 自建 颁发证书_自建 ca 及使用 ca 颁发证书
- Oracle 11g RAC 修改IP
- JS规则 是非颠倒(逻辑非操作符)!是逻辑非操作符,也就是不是的意思,非真即假,非假即真...
- 计算机二级——C语言程序设计 知识点整理
- 【华为 OJ】 字符串分割
- FLUKE 754过程校准器带HART协议
- IOS开发之逆向分析
- cattee翻译_钻机词汇中英翻译
- ERP实施顾问职业所具备的知识和能力结构的几个建议
- python学习笔记9——第八章 异常
- PVE系列教程(十三)、安装黑苹果MacOS(Catalina版本)
- 分享一个挺不错的Git视频教程
热门文章
- 将本地视频上传到云端_如何将本地文件上传到新浪云服务器应用
- Codeforces 524C Idempotent functions
- 黑平台Seener Tech Limtied在MT5上面搭建虚假交易 鼓动操作爆仓
- latex表格横向、纵向合并问题
- 笔记本计算机屏幕亮度暗,笔记本屏幕100%还是暗,win10电脑亮度调节失灵
- 谷歌的人工智能三大布局
- 【python--爬虫】千图网高清背景图片
- HTML5 游戏开发快速提升
- (19年最新,操作极简)linux下使用xmind zen破解版
- oracle 查询 降序排列,Oracle 子查询,按降序排列,取前n条