更新记录

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参数,支持传入多的滚动偏离值
  • 删除多余文件
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.3.13 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
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

事件

事件名 说明 传参
tab切换事件监听 (tab,index)选中的tab信息,选中的选项下标index

Tab列表传参说明

插件实现是原理是使用了uniapp的 createSelectorQueryapi,所以在需要进行相应滚动的操作的时候,需要在对象中的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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问