Tab标签页效果

Tab标签页效果

Tab实例展示实例一 实例二

Tab需要的DOM结构

<div class="Auto_Widget">   (注意switchable任何组件调用必须加入class="Auto_Widget")
    <ul class="switchable-triggerBox">
        <li class="active"><span>郎朗春意</span></li>
        <li>夏日炎炎</li>
        <li>秋高气爽</li>
        <li>冬至寒风</li>
    </ul>
    <div class="switchable-content">
	<div class="switchable-panel">
		郎朗春意,焕发着春天的气息
		<p>  - 在当前 trigger 中 mouseover/mouseout, click, focus, 不触发<br />
		     - 鼠标快速滑过非当前 trigger, 不触发<br />
		     - mouseover 到非当前 trigger, 停留时间到达延迟时,触发<br />
		     - click 或 Tab 切换到 trigger, 立即触发<br />
		     - beforeSwitch/onSwitch 事件的触发<br />
		     - 延迟的内容能正确加载
		</P>
	</div>
	<div class="switchable-panel" style="display: none;">这夏天,出门是烤箱,进门是冰箱</div>
	<div class="switchable-panel" style="display: none;">秋天还真的挺凉爽</div>
	<div class="switchable-panel" style="display: none;">冬天来了,雪花飘了</div>
    </div>
</div>

Tab组件调用方法

<div id="Tabs1" class="Auto_Widget" data-widget-type="Tabs" data-widget-config="{
	autoplay:true,
	effect:'scrolly',
	interval:2000}
">
	<!--  相关Dom结构  -->
</div>

Tab配置参数表格

参数名参数含义参数默认值
eventType支持事件类型点击触发或者鼠标移动 (mouse或click)mouse
autoplay是否自动播放 (true/false)false
interval间隔时间3000(单位:毫秒)
circular是否开始循环滚动 (true/false)false
duration动画时间,如:从图片1渐变到图片2的时间500(单位:毫秒)
hasTriggers是否有触点 (true/false)true
triggersBox触点元素的父元素 (triggersBox和triggers有一即可).switchable-triggerBox
triggers触点元素的class (triggersBox和triggers有一即可).switchable-trigger
content需要显示元素的父元素 (panels和content有一即可).switchable-content
panels需要显示的元素 (panels和content有一即可).switchable-panel
activeIndex默认显示的元素0
activeClass当前选中触点的classactive
steps每次切换多少个触点的内容1
pauseOnHover鼠标悬停停止播放 (true/false)true
islazyload是否执行延迟加载 (true/false)true
lazyDataType延迟加载内容的标签名称 (textarea/img)textarea
textarea延迟加载textarea的class名称textarea-lazyload
execScript是否执行textarea中脚本 (true/false)true
img延时加载图片地址的属性名 <img src="loading.gif" img-lazyload="01.jpg">img-lazyload

转载于:https://www.cnblogs.com/limonyun/p/7690965.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue组件可以通过v-bind和v-show指令实现tab标签切换效果。 首先需要在data中定义一个用于切换的变量,比如tabIndex,默认为0。在模板中,可以使用v-for指令遍历标签的标题,并使用v-bind:class来绑定样式名。在每个标签标题上添加@click事件,通过调用一个方法来更新tabIndex的值。 接下来,在模板中使用v-show指令来根据tabIndex的值来决定当前显示的标签。可以通过判断当前索引是否与tabIndex相等,如果相等则显示,否则隐藏。 下面是一个简单的示例代码: ```html <template> <div> <div> <span v-for="(tab, index) in tabs" :key="index" :class="{ active: index === tabIndex }" @click="changeTab(index)">{{ tab.title }}</span> </div> <div v-for="(tab, index) in tabs" :key="index" v-show="index === tabIndex"> <p>{{ tab.content }}</p> </div> </div> </template> <script> export default { data() { return { tabIndex: 0, tabs: [ { title: '标签1', content: '标签1的内容' }, { title: '标签2', content: '标签2的内容' }, { title: '标签3', content: '标签3的内容' } ] } }, methods: { changeTab(index) { this.tabIndex = index; } } } </script> <style scoped> .active { color: red; font-weight: bold; } </style> ``` 在上述代码中,tabs数组存储了所有标签的内容和标题。changeTab方法根据点击的标题更新tabIndex的值,从而实现切换效果。在模板中使用v-for和v-show指令根据tabIndex的值来决定当前显示的标签和标题的样式。 最后,可以通过CSS来美化标签的样式,比如添加活动样式等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值