更新记录
1.3.0(2022-10-20)
下载此版本
- 优化滚动逻辑,适应H5导航栏
- 添加 v-model,支持数据响应
- 去掉current属性,统一使用v-model
- 更新easyTab组件
1.2.3(2022-05-13)
下载此版本
1.2.2(2022-05-13)
下载此版本
- 修复小程序无法传参入依赖组件
- 修复出现异步数据可能会导致初始化tab的时候样式错误
- 修复小程序在mounted中也无法获取到tab组件的高度
- 添加offsetTop参数,支持传入多的滚动偏离值
- 删除多余文件
查看更多
平台兼容性
HbuilderX/cli最低兼容版本 |
3.3.13 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
Scroll-Tabs
uniapp支持点击滚动到对应的tab的选项卡组件,也支持滚动到对应组件时切换相应的tab选项。
下面其中的scrollTop为必传项,下面的表格不知道为什么展示不全,需要在父页面中调用onPageScroll获取到滚动位置之后传入
组件参数说明
1.3.0版本起使用v-model代替current属性
ScrollTabs
参数配置
参数 |
说明 |
类型 |
默认值 |
必传 |
scrollTop |
由于组件内部无法获取滚动条位置,需要在父级组件调用onPageScroll 获取 |
Number |
0 |
是 |
current |
选中的tab下标(1.3.0版本起不再使用) |
Number |
0 |
否 |
tabs |
选项卡列表,详情见下面说明 |
Array |
[ ] |
是 |
tabOptions |
选项卡组件的配置 详情见下面说明 |
String |
0rpx |
否 |
sticky |
是否设置选项卡为固定定位 |
Boolean |
true |
否 |
itemOffsetTop |
滚动相隔间距,到达会切换tab |
Number |
60 |
否 |
stickyTop |
固定定位的top高度,传入时需要携带单位(如 0rpx) |
Object |
{} |
否 |
scrollTab |
开启滚动时切换到指定的tab |
Boolean |
true |
否 |
clickScroll |
开启点击时滚动到相应位置 |
Boolean |
true |
否 |
offsetTop |
滚动偏离值,添加之后,每次滚动都会减去这个值,数值单位px |
Number |
0 |
否 |
事件
事件名 |
说明 |
传参 |
onChange |
tab切换事件监听 |
(tab,index)选中的tab信息,选中的选项下标index |
Tab列表传参说明
插件实现是原理是使用了uniapp的 createSelectorQuery
api,所以在需要进行相应滚动的操作的时候,需要在对象中的scroll_id
中传入对应元素的class
名,否则无法进行滚动操作,配置示例:
<template>
<view class="content">
<scrollTabs
:tabs="tabs"
>
<view class="item _a">我第一个</view>
<view class="item _b">我第2个</view>
<view class="item _c">我第3个</view>
</scrollTabs>
</view>
</template>
<script>
import scrollTabs from "./scroll-tabs.vue"
export default {
data(){
return {
tabs:[
{label:'文件',scroll_id:'_a'},
{label:'编辑',scroll_id:'_b'},
{label:'视图',scroll_id:'_c'},
{label:'导航',scroll_id:'_d'},
{label:'代码',scroll_id:'_e'},
]
}
}
}
</script>
并不需要一直嵌套在插槽之中使用,只要页面元素与配置中的对应就可以进行滚动操作
TabOptions配置说明
选项卡组件使用的别的组件,api查看这个文档 https://github.com/956632862/easy-tabs