# y-tabs 标签页组件

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

+ <font color="#ff0000" size="2">2.0.1+为非兼容性升级，重命名了诸多样式以及提供的属性名，也移除了部分属性及事件，如无必要，请勿升级，具体调整内容请查看更新记录。</font>

</br>

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


<div id="tips" ></div>

## Tips

+ 如果有问题，可尝试下载最新代码（示例项目中的`uni_modules/y-tabs`是最新的）。
+ 请保证<font color="#1989fa">HBuilderX正式版为 `v3.4.18`、Alpha版为 `v3.5.2`</font>。
+ 使用该插件需安装`scss`插件。
+ 点击右上角的“<font color="#1989fa">使用HubilderX导入示例项目</font>”按钮下载示例项目运行并查看效果，项目中内置不少案例。
+ 也可扫描右侧图片中的微信小程序码查看（由于微信小程序审核较严，无法发布新版本，因此案例较老，最好运行示例项目查看）。
+ 可以加QQ群交流反馈：`566764891`；也可以邮箱或QQ留言：`18508420370@163.com`、`1431948195`。



<div id="supportPlatform" ></div>

## 支持的平台
+ H5、app-vue、微信、支付宝、钉钉、百度、字节、QQ、飞书、快手、京东小程序可用。
+ 暂不支持nvue及快应用。

<div id="usageMode" ></div>

## 使用方式

### 1、通过HbuilerX创建项目

+ 该组件符合`uni_modules`规范，使用`HbuilderX`导入插件到项目根目录下的`uni_modules`文件夹中。
+ `template`中直接使用，无需单独引入注册组件。
+ 该组件依赖于`uni-icons`，请单独导入。


### 2、通过vue cli创建项目

+ 需保证src下面有`uni_modules`文件夹，将y-tabs拷贝到里面
+ 在`pages.json`中通过`easycom`的方式引入组件（tabs组件中使用了uni-icons，因此需要引入uni-ui）
``` json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
			"^y-(.*)": "@/uni_modules/y-$1/components/y-$1.vue"
		}
	},
}
```


#### 普通案例
+ <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" ></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" ></div>

#### 与`Swiper`联动示例

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

```
<template>
 <view>
	 <y-tabs ref="tabs" v-model="activeIndex" barAnimateMode="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="swpierChange">
	 	<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()的锁定
			},
			swpierChange(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" ></div>

## Tabs Props
<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> 绑定当前选中标签的标识符 </td><td> 0 </td><td> 即tab选中项的下标或者tab的name属性值 </td></tr>
	<tr><td> type   </td><td> string </td><td> 样式风格类型 </td><td> line</td><td> 可选值为 text、card、button、line-button </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> 标签栏的展示方位 </td><td> horizontal </td><td> 可选值：vertical </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> 滑块宽度，支持rpx、vh、vw等单位及calc()函数，也可传入'auto'值，默认px。  </td><td> type为line，标签栏水平、垂直时宽度分别为20px、3px，其余为选中标签宽度；为auto时，代表滑块宽度自适应于选中标签宽度（仅在type='line'且bar-animate-mode='linear'、direction='horizontal'下生效） </td><td> 仅支持type为line、button、line-button。  </td></tr>
	<tr><td> bar-height <font color="#1989fa" size="2">V2.0.1</font>    </td><td>number、string </td><td> 滑块高度，支持度同bar-width </td><td> type为line，标签栏水平、垂直时宽度分别为3px、20px，其余为选中标签高度；为auto时，代表滑块高度自适应于选中标签高度（仅在type='line'、bar-animate-mode='linear'、direction='vertical'下生效） </td><td> 同bar-width </td></tr>
	<tr>
		<td> bar-style  <font color="#1989fa" size="2">V2.0.1</font> </td>
		<td> object </td>
		<td> 滑块样式 </td>
		<td> - </td>
		<td> 同bar-width</td>
	</tr>
	<tr>
		<td> bar-animate-mode  <font color="#1989fa" size="2">V2.0.1</font> </td>
		<td>string </td>
		<td> 滑动切换tab内容时滑块的动画模式，默认为linear。可选值：worm(毛毛虫蠕动)、worm-ease(毛毛虫缓动效果)、none(不设置)。  </td>
		<td> linear </td>
		<td> 仅在 type='line'、direction='horizontal' 时有效。   <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> false </td><td>  </td></tr>
	<tr>
		<td> animated </td>
		<td> boolean </td>
		<td> 是否开启动画  </td>
		<td> true </td>
		<td> 用于开启标签栏滚动的过渡动画、切换标签内容时的转场动画、滚动导航下的内容定位动画 </td>
	</tr>
	<tr><td> active-last  <font color="#1989fa" size="2">V2.0.1</font> </td><td> boolean </td><td> 在滚动导航模式下，滚动到最后一个标签内容但其顶部未超过可视区域时，是否激活对应的标签项  </td><td> false </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> 快速滑动时不受限制 </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、string </td><td> 粘性布局下标签栏与顶部的最小距离，单位为 px </td><td> 0 </td><td> 注意单位问题，如果是rpx，需要uni.upx2px转为px </td></tr>
	<tr><td> z-index    </td><td> number、string </td><td> 粘性布局下，标签栏的z-index值  </td><td> 99 </td><td>  </td></tr>
	<tr><td> sticky-threshold </td><td> number、string </td><td> 粘性布局吸顶的判断阈值 </td><td> 0</td><td> 表示在页面滚动时,标签栏距屏幕顶部多少px时会触发吸顶函数进行吸顶判断 <font color="#1989fa" size="1">案例 ：透明导航栏下的滚动吸顶</font> </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、string </td><td> 标题栏背景色透明渐变的滚动距离 </td><td> 150 </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" ></div>

## Tab Props
<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、string</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" ></div>

## Tabs Events
<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>
	<tr><td>slide-change <font color="#1989fa" size="2">V2.0.9</font></td>  <td>内容页滑动时触发（仅barAnimateMode为linear、worm、worm-ease时有效）</td>  <td>  { dx：滑动距离； rate：当前滑动长度占滑动区域的比例；targetIndex：目标下标；} </td> </tr>
	<tr><td>slide-end <font color="#1989fa" size="2">V2.1.4</font></td>  <td>内容页滑动结束时触发（仅barAnimateMode为linear、worm、worm-ease时有效）</td>  <td>  { targetIndex: 目标下标 } </td> </tr>
</table>

<div id="tabsSlots" ></div>

## Tabs Slots
<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" > </div>
 
 ## Tab Slots
  <table>
  	<tr><th style="width:140px;">名称</th><th>说明</th></tr>
  	<tr><td>default</td>  <td>标签页内容</td></tr>
  </table>

 <div id="tabsMethod" ></div>
 
 ## Tabs Methods
 通过 ref 可以获取到 Tabs 实例并调用实例方法(如果是vue3的组合式API,请使用vue3的写法)；
 <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" ></div>
  
## 注意事项及常见问题
  


### 组件从隐藏状态切换到显示状态时，底部条位置错误？
Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。
#### 解决方法
方法一，如果是使用 `v-show` 来控制组件展示的，则替换为 `v-if` 即可解决此问题：
```html
<!-- Before -->
<y-tabs v-show="show" />
<!-- After -->
<y-tabs v-if="show" />
```
方法二，调用组件的 resize 方法来主动触发重绘：
```html
<y-tabs v-show="show" ref="tabs" />

```
```javascript
this.$refs.tabs.resize();
```

### 标签选中后，样式变化可能会导致底部条错误
对于选中的标签，在放大字体的同时添加了过渡样式且有过渡时长，会使标签宽高发生变化，导致内部对于滑块的位置计算错误
#### 解决方法
 * 可以考虑给每一个标签通过`title-style`设定固定宽高，避免标签文字放大后标签宽高变化
 * 如果没有过渡效果，设置`is-dynamic`即可解决滑块错误的问题，否则有过渡时长使用了该属性也难以保证滑块位置计算正确



### 如何解决上下滑动与左右滑动相冲突？

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



### 切换标签时页面会闪烁？ 
 标签切换后，显示的内容是异步请求获取数据进行渲染的，请给标签内容一个实际的最小高度,避免数据清空后高度回弹有导致页面闪烁
 


### 在u-popup组件中的y-tabs组件需resize一次
对于在`u-popup`中的`tabs`，在弹出层显示后需调用`resize`方法，避免内部计算错误 <font color="#1989fa" size="1">案例 ：在Popup中的标签页</font>

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

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

```


### uni-data-select组件显示下拉选项时会被遮挡？
受限于tabs组件样式，内容区域使用了`overflow:hidden`,导致`uni-data-select`下拉选项被遮挡，需要给其父容器设置足够的高度才能完整显示

### uni-datetime-picker、uni-popup等使用fixed定位的组件显示位置不对？
由于y-tab使用了```transform: translate(0px, 0px) translateZ(0px);```,需避免fixed元素被y-tab包裹，请放在y-tabs组件的外层

### 如何在自定义组件中修改y-tabs组件的样式？
在微信小程序端，在自定义组件中使用了`y-tabs`，需要设置`styleIsolation: 'shared'`,否则在自定义组件中无法修改`y-tabs`的样式
 
 
### 如何修改y-tabs的样式：
* 如果在`自定义组件`或`页面`中引入了y-tabs，使用 `::v-deep` 在`y-tabs`所在的`页面`进行修改
* 将要修改的样式放在全局样式中，但要给`y-tabs`赋予一个全局唯一的类名，避免全局样式污染
* 仅在微信小程序端，如果自定义组件中使用了`y-tabs`并想修改其样式，需要在自定义组件上配置`styleIsolation: 'shared'`

 ```javascript
export default {
    options: {
        styleIsolation: 'shared'
    },
```


### 如何对激活标签的相邻标签设置样式 ？
 直接可使用`y-tab__prev`与`y-tab__next` 类 <font color="#1989fa" size="1">案例 ：组合导航(侧边栏导航+滚动导航)-仿京东商品分类</font>
 
 
### 侧边栏导航、滚动导航模式

 * 两者内容区域的滚动方式通过`pageScroll`属性控制
 * 为false时，则表示内容页是放在`scroll-view`中实现的局部滚动 <font color="#1989fa" size="1">案例 ：滚动导航(区域滚动) | 侧边栏导航(区域滚动)</font>
 * 为true时，则表示内容区域是在页面上的，跟随页面滚动而滚动(页面级滚动)  <font color="#1989fa" size="1">案例 ：滚动导航(页面级滚动) |  侧边栏导航(页面级滚动)</font>
 * 如何取舍两者之间的使用，根据场景考虑，比如你的标签页上方有banner图，你需要在滚动过程中让标题栏浮动时，则需要页面级滚动,或者需要触发原生的上拉加载、下拉刷新事件也用该方式；
 * 如果你想两种模式在一定高度内滚动，那么就使用局部滚动。
 
 
### 如果标签栏仍出现滚动条，请在全局样式（可放在APP.vue引入的样式文件）中添加如下css：
```scss
// 隐藏scroll-view的滚动条
::-webkit-scrollbar {
    display: none;  
    width: 0 !important;  
    height: 0 !important;  
    -webkit-appearance: none;  
    background: transparent;  
}
```
 
 
 ### 如果在进入页面时又跳转了其他页面，会导致y-tabs内部未初始化完成，因此底部条会错位：
* 场景：进入‘我的’页面，检测到用户未登录，跳转至登录页进行登录后又回到‘我的’页面
* 解决方法如下：

 ```javascript
export default {
   onShow() {
	// 如果进入该页面又跳转了其他页面，则在onShow中resize一下组件，避免跳转其他页面时tabs内部未初始化完成
	this.$refs?.tabs?.resize()
},
```