# y-tabs 标签页组件

<font color="#ff0000" size="6">注意：</font>

+ <font color="#ff0000" size="4">2.0.1为非兼容性升级，重命名了诸多样式以及提供的属性名，也移除了部分属性及事件，如无必要，请勿升级。</font>
+ 如果不小心升级，可以在示例项目中的yTabsVersion目录中找到之前的版本。
+ 从2.0.1版本开始，对于吸顶以及滚动导航定位标签的实现已调整了内部逻辑，因此无需在页面中的onPageScroll生命周期调用this.$emit("onPageScroll",e)；
+ 新增bar-animate-mode属性，用于设置滑块切换的动画模式；
+ 新增bar-style属性，用于设置滑块样式；
+ 新增bar插槽，用于自定义滑块的内容；
+ line-width、line-height属性名改为bar-width、bar-height；
+ 移除部分tabs Props: tab-click-scroll-top、navHeight 、navWidth 、contentHeight；
+ 请注意部分属性默认值的调整；
+ 移除scroll事件，如果有用到该事件判断标签栏是否吸顶，请替换为sticky-change事件； 
+ 新增sticky-change事件，该事件传递了{isFixed}参数，用于说明标签栏是否吸顶固定；
+ 移除'滚动吸顶+滑动切换'案例
+ 新增'与swiper组件联动'案例；
+ 在QQ/百度/字节跳动/飞书/快手小程序中，自定义组件在渲染时会比App/H5端多一级节点，导致标签内容样式失效，需在组件上添加".y-tab-virtual"的样式；


</br>
</br>




+ [Tips](#tips)
+ [支持的平台](#supportPlatform)
+ [使用方式](#usageMode)
+ [滚动吸顶示例](#scrollExamples)
+ [与swiper联动示例](#LinkWithSwiperExamples)
+ [Tabs Props](#tabsProps)
+ [Tab Props](#tabProps)
+ [Tabs Events](#tabsEvents)
+ [Tabs 方法](#tabsMethod)
+ [Tabs Slots](#tabsSlots)
+ [Tab Slots](#tabSlots)
+ [注意事项及常见问题](#beCareful)


<div id="tips" style="color:#1989fa;font-weight: bold;">Tips</div>

+ 代码更新于2023/08/30 13:57，若有问题，请下载最新代码（示例项目中的uni_modules/y-tabs是最新的）。
+ 请保证<font color="#1989fa">HBuilderX正式版为 v3.4.18、Alpha版为 v3.5.2</font>。
+ 该插件使用的预编译，需要自行安装less插件。
+ 如果发现组件有bug或者不完善可以留言交流，发邮箱（18508420370@163.com）或QQ（1431948195）更方便看到。
+ 点击右上角的“<font color="#1989fa">使用HubilderX导入示例项目</font>”按钮下载示例项目运行并查看效果，项目中内置不少案例。
+ 也可以扫描右侧图片中的微信小程序码查看示例效果（由于微信小程序审核较严，无法发布新的版本，因此案例比较老了，最好导入示例项目查看）。



<div id="supportPlatform" style="color:#1989fa;font-weight: bold;">支持的平台：</div>

+ H5、app-vue、微信、支付宝、钉钉、百度、字节、QQ、飞书、快手小程序可用，其他平台可自行测试。
+ 暂不支持nvue。



<div id="usageMode" style="color:#1989fa;font-weight: bold;">使用方式：</div>



<div style="font-weight: bold;">1、导入插件</div>

该组件符合uni_modules规范，使用HbuilderX导入插件到项目根目录下的uni_modules文件夹中。


<div style="font-weight: bold;">2、template中使用</div>

符合uni_modules规范，直接在页面中使用，无需单独引入注册组件。


普通案例
+ <font color="#ff0000" size="2">注意：在QQ/百度/字节跳动/飞书/快手小程序中，自定义组件在渲染时会比App/H5端多一级节点，导致标签内容样式失效，需在组件上添加".y-tab-virtual"的样式</font>

```
<template>
 <view>
	 <y-tabs v-model="activeIndex" @click="tabClick"  @change="tabChange">
	 	<y-tab class="y-tab-virtual" v-for="index in 5" :key="index" :title="'标签'+index">
	 		<view class="content-wrap"> 内容{{index}} </view>
	 	</y-tab>
	 </y-tabs>
 </view>
</template>
<script>
	export default {
		data() {
			return {
				activeIndex: 0,
			}
		},
		methods: {
			// 标签点击事件
			tabClick(index, item) {
				console.log("tabClick", index, item);
			},
			// 标签切换事件
			tabChange(index, item) {
				console.log("tabChange", index, item);
			}
		}
	}
</script>
<style scoped>
/* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
.y-tab-virtual {
	position: relative;
	flex-shrink: 0;
	width: 100%;
}
</style>

```


<div id="scrollExamples" style="color:#1989fa;font-weight: bold;">滚动吸顶示例：</div>

+ 直接开启sticky属性即可


```
<template>
 <view>
	 <y-tabs v-model="activeIndex" sticky :offsetTop="offsetTop">
		<y-tab class="y-tab-virtual" v-for="index in 5" :key="index" :title="'标签'+index">
			<view class="content-wrap"> 内容{{index}} </view>
		</y-tab>
	 </y-tabs>
 </view>
</template>
<script>
	export default {
		data() {
			return {
				activeIndex: 0,
				offsetTop: 0, //粘性定位布局下与顶部的最小距离
			}
		},
		created() {
			// H5端需要减去顶部导航栏高度
			// #ifdef H5
			this.offsetTop = 43
			// #endif
		},
	}
</script>
<style scoped>
/* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
.y-tab-virtual {
	position: relative;
	flex-shrink: 0;
	width: 100%;
}

.content-wrap{
	height:200vh;
}

</style>


```


<div id="LinkWithSwiperExamples" style="color:#1989fa;font-weight: bold;">与swiper联动示例：</div>

+ 请注意swiper组件的@transition、@animationfinish的支持平台
+ lineAnimateMode="worm",设置底部条切换类似毛毛虫蠕动的效果
+ 经过测试，仅支持App、H5、微信、支付宝、字节跳动、QQ、快手小程序

```
<template>
 <view>
	 <y-tabs ref="tabs" v-model="activeIndex" lineAnimateMode="worm">
	 	<y-tab v-for="(item, index) in tabs" :title="item.title" :key="index" />
	 </y-tabs>
	 
	 <!--
	 	支持平台
	 	1. @transition: 支持App、H5、微信、支付宝、字节跳动、飞书、QQ、快手
	 	2. @animationfinish: 字节跳动、飞书小程序不支持(在change事件中unlockDx)
	  -->
	 
	 <swiper class="swiper" :current="activeIndex" @transition="onTransition" @animationfinish="onAnimationfinish" @change="onChange">
	 	<swiper-item v-for="(item, index) in tabs" :key="index">
	 		<view class="swiper-item-view" :style="{backgroundColor: item.color}">
	 			{{item.title}}
	 		</view>
	 	</swiper-item>
	 </swiper>
 </view>
</template>
<script>
	export default {
		data() {
			return {
				tabs: [],
				activeIndex: 0,
			}
		},
		created() {
			this.tabs = Array.from({ length: 5 }, (o, i) => {
				return {
					title: 'tab' + (i + 1),
					color: this._getRandomColor()
				}
			});
		},
		methods: {
			//swiper滑动中
			onTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			//swiper滑动结束
			onAnimationfinish(e) {
				this.activeIndex = e.detail.current;
				setTimeout(() => this.$refs.tabs.unlockDx(), 0)  //通知y-tabs解除对setDx()的锁定
			},
			onChange(e) {
				//  由于字节跳动、飞书不支持@animationfinish，因此在change事件中unlockDx
				// #ifdef MP-TOUTIAO || MP-LARK
				this.onAnimationfinish(e)
				// #endif
			},
			// 生成随机颜色
			_getRandomColor() {
				const rgb = [];
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('');
			},
		},
	}
</script>
<style scoped>
.swiper {
	height: 300rpx;
}

.swiper-item-view {
	background-color: #007AFF;
	height: 300rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 50rpx;
}
</style>

```

<div id="tabsProps" style="color:#1989fa;font-weight: bold;">Tabs Props</div>

<table>
	<tr><th style="width:15%;">参数</th><th style="width:15%;">类型</th><th style="width:30%;">描述</th><th  style="width:10%;">默认值</th><th style="width:30%;">支持度或案例</th></tr>
	<tr><td> v-model   </td><td>  number、string </td><td> 绑定当前选中标签的标识符（即tab选中项的下标或者tab的name属性值） </td><td> 0 </td><td>  </td></tr>
	<tr><td> type   </td><td> string </td><td> 样式风格类型，可选值为 text、card、button、line-button </td><td> line</td><td>  </td></tr>
	<tr><td> color </td><td> string </td><td> 标签主题色 </td><td> <font color="#0022AB">#0022AB</font> </td><td>  </td></tr>
	<tr><td> background    </td><td> string </td><td> 标签栏背景色  </td><td> #fff </td><td>  </td></tr>
	<tr><td> title-active-color    </td><td> string </td><td> 标题选中态颜色  </td><td> - </td><td>  </td></tr>
	<tr><td> title-inactive-color    </td><td> string </td><td> 标题默认态颜色  </td><td> - </td><td>  </td></tr>
	<tr><td> wrap-style    </td><td> object </td><td> 标签栏样式 <font color="#1989fa" size="1">案例 ：透明导航栏下的滚动吸顶</font> </td><td> - </td><td>  </td></tr>
	<tr><td> direction    </td><td> string </td><td> 标签栏的展示方位,可选值：vertical。 </td><td> horizontal </td><td>  </td></tr>
	<tr>
		<td> duration </td>
		<td> number、string </td>
		<td> 动画时间，单位秒  </td>
		<td> 0.3 </td>
		<td> 仅支持type为line、button、line-button的滑块移动的动画时间，标签内容切换时的转场动画时间、页面级滚动导航的内容定位动画时间。 </td>
	</tr>
	<tr><td> shrink    </td><td> boolean </td><td> 通过 shrink 属性可以开启收缩布局，开启后，所有的标签会向左侧收缩对齐  </td><td> false </td><td>  </td></tr>
	<tr><td> bar-width  <font color="#1989fa" size="2">V2.0.1</font>   </td><td> number、string </td><td> 滑块宽度，默认单位为px, 支持数字、rpx、vh、vw等单位及calc() 函数。  </td><td> 标签栏水平/垂直展示时,type为line,宽度默认为20px/3px;而type为button、line-button时,宽度默认为选中标签宽度。 </td><td> 仅支持type为line、button、line-button。使用了插槽bar则无效  </td></tr>
	<tr><td> bar-height <font color="#1989fa" size="2">V2.0.1</font>    </td><td>number、string </td><td> 滑块高度，默认单位为px，支持数字、rpx、vh、vw等单位及calc() 函数。  </td><td> 标签栏水平/垂直展示时,type为line,高度默认为3px/20px, 而type为button、line-button时,宽度默认为选中标签高度。  </td><td> 仅支持type为line、button、line-button。使用了插槽bar则无效 </td></tr>
	<tr>
		<td> bar-style  <font color="#1989fa" size="2">V2.0.1</font> </td>
		<td> object </td>
		<td> 滑块样式 </td>
		<td> - </td>
		<td> 仅支持type为line、button、line-button。使用了插槽bar则无效 </td>
	</tr>
	<tr>
		<td> bar-animate-mode  <font color="#1989fa" size="2">V2.0.1</font> </td>
		<td>string </td>
		<td> 滑动切换tab内容时滑块的动画模式，默认值为linear，即切换tab时滑块宽度保持不变，线性运动。可选值为worm(毛毛虫蠕动)、worm-ease(毛毛虫缓动效果)、none(不设置)。  </td>
		<td> linear </td>
		<td> 仅支持type为line。   <br/>可结合swiper组件使用，效果更好 <font color="#1989fa" size="1">案例 ：新闻列表、与swiper组件联动</font> </td>
	</tr>
	<tr><td> is-dynamic <font color="#1989fa" size="2">V2.0.1</font>     </td><td> boolean </td><td> 标签切换后宽高是否有变化  </td><td> true </td><td> 如果当前选中标签会放大文字、减少内间距等，开启该属性可避免滑块错位。（如果选中的标签文字使用‘font-size:20px;transition: all .2s’进行过渡变化，开启该属性仍旧会错位） </td></tr>
	<tr><td> ellipsis     </td><td> boolean </td><td> 是否省略过长的标题文字  </td><td> true </td><td> 标签栏水平展示时，如果标签数量未超过滚动阈值则生效，垂直展示不限制。 </td></tr>
	<tr><td> scroll-threshold    </td><td> number、string </td><td> 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动  </td><td> 5 </td><td>  </td></tr>
	<tr><td> scroll-to-center    </td><td> boolean </td><td> 标签栏滚动时当前标签居中  </td><td> true</td><td>  </td></tr>
	<tr><td> is-lazy-render    </td><td> boolean </td><td> 是否开启延迟渲染（首次切换到标签时才触发内容渲染）  </td><td> true </td><td>  </td></tr>
	<tr>
		<td> animated </td>
		<td> boolean </td>
		<td> 是否开启动画  </td>
		<td> true </td>
		<td> 用于开启标签栏滚动的过渡动画、切换标签内容时的转场动画、滚动导航下的内容定位动画 </td>
	</tr>
	<tr><td> before-change    </td><td> (name) => boolean | Promise </td><td> 切换标签前的回调函数，返回 false 可阻止切换，支持返回 Promise</td><td> - </td><td> name为v-model绑定的值 </td></tr>
	<tr><td colspan="4" rows="3" height="60">  <font color="#1989fa">内容手势滑动切换相关属性 :</font> </td><td>  </td></tr>
	<tr><td> swipeable    </td><td> boolean </td><td> 是否开启手势滑动切换 <font color="#1989fa" size="1">案例 ：滑动切换 | 新闻列表 | 滚动吸顶+左右滑动 </font> </td></td><td>  false </td><td>  </td></tr>
	<tr>
		<td> swipe-animated </td>
		<td> boolean </td><td> 是否开启标签内容滑动时的拖动动画</td>
		<td> true </td>
		<td> swipeable为true、且is-lazy-render为false时有效 </td>
	</tr>
	<tr><td> swipe-threshold    </td>
		<td> number、string </td>
		<td> 滑动切换的滑动距离阈值，单位为px；表示开启手势滑动时，横向滑动多少px切换标签内容  </td>
		<td> 120 </td>
		<td> bar-animate-mode为worm、worm-ease时无效（worm时阈值默认为标签内容的一半，不可设置） </td>
	</tr>
	<tr><td colspan="4" height="60">  <font color="#1989fa">滚动吸顶相关属性 :</font> </td><td>  </td></tr>
	<tr><td> sticky	</td><td> boolean	</td><td> 是否使用粘性定位布局进行滚动吸顶 <font color="#1989fa" size="1">案例 ：滚动吸顶</font>	</td><td> false</td><td>  </td></tr>
	<tr><td> offset-top    </td><td> number </td><td> 粘性定位布局下标签栏与顶部的最小距离，单位为 px </td><td> 0 </td><td>  </td></tr>
	<tr><td> z-index    </td><td> number </td><td> 粘性定位布局下，标签栏的z-index值  </td><td> 99 </td><td>  </td></tr>
	<tr><td> transparent    </td><td> boolean </td><td> 页面滚动过程中,标题栏背景色是否透明渐变 <font color="#1989fa" size="1">案例 ：透明渐变标题栏</font>  </td><td> false </td><td> background属性值必须为rgba格式 </td></tr>
	<tr><td> transparent-offset    </td><td> number </td><td> 标题栏背景色透明渐变的滚动距离 </td><td> 150 </td><td> 请保证标签内容的高度大于该值 </td></tr>
	<tr><td> sticky-threshold </td><td> number </td><td> 粘性布局的判断阈值：表示在页面滚动过程中,标签栏距屏幕顶部多少px时，触发吸顶函数进行吸顶判断 <font color="#1989fa" size="1">案例 ：透明导航栏下的滚动吸顶</font> </td><td> 0</td><td>  </td></tr>
	<tr><td colspan="4" height="60">  <font color="#1989fa">滚动导航及侧边栏导航相关属性 :</font> </td><td>  </td></tr>
	<tr><td> scrollspy    </td><td> boolean </td><td> 是否开启滚动导航；该模式下，内容将会平铺展示 <font color="#1989fa" size="1">案例 ：滚动导航(页面级滚动)</font> </td><td> false </td><td> 如果标签栏垂直展示，且内容平铺展示，就为侧边栏模式<font color="#1989fa" size="1">案例 ：侧边栏导航(页面级滚动)-仿奶茶点单</font> </td></tr>
	<tr><td> page-scroll    </td><td> boolean </td><td>  滚动导航模式下，内容区域是否跟随页面滚动 </td><td> true </td><td> 为false时，内容区域是放在scroll-view中实现的局部滚动，需自行设置标签页容器高度 <font color="#1989fa" size="1">案例 ：侧边栏导航(区域滚动)-仿奶茶点单</font> </td></tr>
</table>



<div id="tabProps" style="color:#1989fa;font-weight: bold;">Tab Props</div>

<table>
	<tr><th style="width:140px;">参数</th><th>类型</th><th>描述</th><th>默认值</th></tr>
	<tr><td>name</td>  <td>number、string</td>  <td>标签名称，作为匹配的标识符</td> <td>标签的索引值</td></tr>
	<tr><td>title</td>  <td>string</td>  <td>标题</td> <td>-</td></tr>
	<tr><td>disabled</td>  <td>boolean</td>  <td>是否禁用标签</td> <td>false</td></tr>
	<tr><td>dot</td>  <td>boolean</td>  <td>是否在标题右上角显示小红点（优先级高于badge）</td> <td>false</td></tr>
	<tr><td>badge</td>  <td>number、string</td>  <td>图标右上角徽标的内容</td> <td>-</td></tr>
	<tr><td>badge-max-count  <font color="#1989fa" size="2">V2.0.1</font> </td>  <td>number、string</td>  <td>徽标数最大数字限制,超过这个数字将变成badgeMaxCount+,如果传空字符串则不设置</td> <td>99</td></tr>
	<tr><td>title-style</td>  <td>object</td>  <td>自定义标题样式</td> <td>-</td></tr>
	<tr><td>title-class</td>  <td>string</td>  <td>自定义标题类名</td> <td>-</td></tr>
	<tr><td>icon-type</td>  <td>string</td>  <td>图标图案，为uniapp扩展组件（uni-ui）下的uni-icons的type值，customPrefix用法等同</td> <td>-</td></tr>
	<tr><td>icon-size</td>  <td>number</td>  <td>图标大小</td> <td>16</td></tr>
	<tr><td>custom-prefix</td>  <td>string</td>  <td>自定义图标</td> <td>-</td></tr>
	<tr><td>image-src</td>  <td>string</td>  <td>图片路径</td> <td>-</td></tr>
	<tr><td>image-mode</td>  <td>string</td>  <td>图片裁剪、缩放的模式，为uniapp内置组件->媒体组件—>image下的mode属性的可选值</td> <td>-</td></tr>
	<tr><td>position</td>  <td>string</td>  <td>在存在图片或图标的情况下，标题围绕它们所在的位置，可选值：left、top、bottom</td> <td>right</td></tr>
</table>

<div id="tabsEvents" style="color:#1989fa;font-weight: bold;">Tabs Events</div>
<table>
	<tr><th style="width:140px;">事件名</th><th>说明</th><th>回调参数</th></tr>
	<tr><td>click</td>  <td>点击标签时触发</td>  <td>name：标识符，title：标题</td></tr>
	<tr><td>change</td>  <td>当前激活的标签改变时触发</td>  <td>name：标识符，title：标题</td></tr>
	<tr><td>disabled</td>  <td>点击被禁用的标签时触发</td>  <td>name：标识符，title：标题</td></tr>
	<tr><td>rendered</td>  <td>标签内容首次渲染时触发（仅在开启延迟渲染后触发）</td>  <td>name：标识符，title：标题</td></tr>
	<tr>
		<td>sticky-change  <font color="#1989fa" size="2">V2.0.1</font> </td>  
		<td>吸顶时触发，仅在 sticky 模式下生效</td>  
		<td>{ isFixed: 是否吸顶 }</td>
	</tr>
	<tr><td>loaded <font color="#1989fa" size="2">V2.0.6</font></td>  <td>组件内部初始化完成后调用</td>  <td> - </td> </tr>
</table>

<div id="tabsSlots" style="color:#1989fa;font-weight: bold;">Tabs Slots</div>
<table>
	<tr><th style="width:140px;">名称</th><th>说明</th></tr>
	<tr><td>nav-left</td>  <td>标题左侧内容</td></tr>
	<tr><td>nav-right</td>  <td>标题右侧内容</td></tr>
	<tr><td>title+下标</td>  <td>标签标题插槽，插槽名默认为"title"+tab下标（注意：vue3中仅H5、app-vue有效，小程序端无效）</td></tr>
	<tr><td>bar <font color="#1989fa" size="2">V2.0.1</font></td>  <td>滑块插槽，可自定义滑块的内容(可以设置图片等)</td></tr>
</table>
	
 <div id="tabSlots" style="color:#1989fa;font-weight: bold;"> Tab Slots</div>
  <table>
  	<tr><th style="width:140px;">名称</th><th>说明</th></tr>
  	<tr><td>default</td>  <td>标签页内容</td></tr>
  </table>

 <div id="tabsMethod" style="color:#1989fa;font-weight: bold;">Tabs 方法</div>
 通过 ref 可以获取到 Tabs 实例并调用实例方法；
 <table>
 	<tr><th style="width:140px;">方法名</th><th>说明</th><th>参数</th><th>返回值</th></tr>
 	<tr><td>resize</td>  <td>外层元素大小、标签数量变化、滑块错位以及标签定位不准时，可以调用此方法来触发组件内部初始化进行调整</td>  <td>callback: 回调函数</td> <td>-</td></tr>
	<tr><td>reset</td>  <td>重置组件的一些状态，并调用了resize方法进行数据初始化</td>  <td>callback: 回调函数</td> <td>-</td></tr>
	<tr><td>scrollTo</td>  <td> 滚动到指定的标签页，在滚动导航模式下可用</td>  <td>name: 标识符</td> <td>-</td></tr>
	<tr><td>setDx</td>  <td> 设置滑块的水平偏移量（结合swiper组件的@transition事件，设置滑块的位置；经过测试，仅在App、H5、微信、支付宝、字节跳动、QQ小程序上有良好的效果）</td>  <td>dx: swiper组件的e.detail.dx</td> <td>-</td></tr>
	<tr><td>unlockDx</td>  <td> 解除对setDx()的锁定（结合swiper组件的@animationfinish事件，在动画完成后不锁定setDx）</td>  <td>-</td> <td>-</td></tr>
</table>

  <div id="beCareful" style="color:#1989fa;font-weight: bold;">注意事项及常见问题</div>
  <div style="font-weight: bold;">1. 如何解决上下滑动与左右滑动相冲突？</div>

  * 直接给标签内容具体的高度，使用scroll-view实现局部滚动 <font color="#1989fa" size="1">案例 ：滑动切换</font>
  * 但是这种方式会无法触发页面级的上拉加载与下拉刷新事件，因此需要去插件市场找类似的插件




<div style="font-weight: bold;">2.如果为侧边栏导航，需要对当前标签附近的两个标签项设置样式？</div>
直接可使用"y-tab\_\_prev"与"y-tab\_\_next" 类 <font color="#1989fa" size="1">案例 ：组合导航(侧边栏导航+滚动导航)-仿京东商品分类</font>


<div style="font-weight: bold;">3.侧边栏导航、滚动导航：</div>

 * 两者内容区域的滚动方式通过pageScroll属性控制
 * 为false时，则表示内容区域是放在scroll-view中实现的局部滚动 <font color="#1989fa" size="1">案例 ：滚动导航(区域滚动) | 侧边栏导航(区域滚动)</font>
 * 为true时，则表示内容区域是屏幕在页面上的，跟随页面滚动而滚动(页面级滚动)  <font color="#1989fa" size="1">案例 ：滚动导航(页面级滚动) |  侧边栏导航(页面级滚动)</font>
 * 如何取舍两者之间的使用，具体就要看使用场景了，比如你的标签页上方有banner图，你需要在滚动过程中让标题栏浮动时，则需要页面级滚动,或者需要触发原生的上拉加载、下拉刷新事件也用该方式；
 * 如果你想两种模式在一定高度内滚动，那么就使用默认的局部滚动实现方式。


<div style="font-weight: bold;">4.切换标签时页面会闪烁？</div>

 * 如果切换标签之后显示的内容是通过接口拿到的数据进行渲染的，请给标签内容一个实际的高度,避免数据清空后导致页面高度回弹


<div style="font-weight: bold;">5.如果给选中的标签，在放大字体的同时添加了过渡样式且有过渡时长，会使标签宽高发生变化，导致内部对于滑块的位置计算错误</div>

 * 可以考虑给每一个标签通过titleStyle设定固定宽高，避免标签文字放大后标签宽高变化
 * 如果没有过渡效果，设置is-dynamic即可解决滑块错误的问题


<div style="font-weight: bold;">6.对于嵌在弹出层如u-popup组件中的y-tabs，在弹出层显示后需要调用resize方法，避免内部计算错误 <font color="#1989fa" size="1">案例 ：在Popup中的标签页</font></div>

```
// templete
<u-popup :show="show" :round="10" @close="show = false" @open="open">
	<y-tabs ref="tabs" v-model="activeIndex">
	...
	</y-tabs>
</u-popup>

// script 
export default{
	data(){
		return {
			show: false
		}
	},
	methods:{
		open(){
			this.show = true;
			setTimeout(()=>{
				this.$refs.tabs.resize();
			},1000)
		}
	}
}

```