更新记录

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

平台兼容性

uni-app

其他

Scroll-Tabs

uniapp支持点击滚动到对应的tab的选项卡组件，也支持滚动到对应组件时切换相应的tab选项。 下面其中的scrollTop为必传项，下面的表格不知道为什么展示不全，需要在父页面中调用onPageScroll获取到滚动位置之后传入

组件参数说明

1.3.0版本起使用v-model代替current属性

ScrollTabs

参数配置

事件

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