更新记录

1.0.0（2025-05-21） 下载此版本

feat: 滚动条指示器

平台兼容性

Scroll-Indicator

手动实现 scroll-view / viewport 的滚动进度条展示，支持自定义滚动条尺寸和背景色。同时允许开启滑块滑动进行视图滚动。

IOS 需要开启 disableScroll: true, 取消当前页的橡皮筋效果，滑块的滑动受影响。

如果touch事件出现冒泡导致父组件功能异常，建议在使用 scroll-indicator 组件时同时绑定 touch 事件，通过 .stop 修饰。

scroll-view 需要关闭 scroll-with-animation 动画效果，scroll-indicator 交互使用节流方式以及大帧率计算渲染，不需要开启动画过度，容易引起滚动距离更新问题。

Props

属性 描述 类型 是否必填 默认值
modelValue 滚动距离（v-model） number - -
scrollView 获取scroll-view节点函数 () => Promise<ComponentInstance> 是 -
direction 滚动条方法 'vertical'\/'horizontal' - 'vertical'
scrollPadding scroll-view内边距，根据direction方向设置，用于计算滚动范围 number - 0
trackWidth 轨道宽度，默认px单位。当direction为'vertical'时，默认取 defaultTrackWidth 值，否则，默认'100%' number | string - -
trackHeight 轨道高度，默认px单位。当direction为'horizontal'时，默认取 defaultTrackHeight 值，否则，默认'100%' number | string - -
trackBackground 轨道背景色 string - -
thumbBackground 滑块背景色 string - -
thumbMinSize 滑块最小高度，默认px单位。未指定默认按 defaultTrackWidth/defaultTrackHeight 值设置 number - -
borderRadius 轨道圆角大小，默认px单位 number - 0
trackClass track轨道自定义样式类 string - -
thumbClass thumb滑块自定义样式类 string - -
defaultTrackWidth 轨道默认宽度，默认px单位，当direction为'vertical'时有效 number - true
defaultTrackHeight 轨道默认高度，默认px单位，当direction为'horizontal'时有效 number - 0
disabled thumb滑块禁用touch boolean - true
renderWhenMounted 组件在mounted时初始化计算滚动 boolean - true
debounce 相关滚动更新时延，单位ms。主要用于节流，建议根据帧率设置。按帧率=debounce+transitionTime设置 number - 25
transitionTime thumb滑块过渡时长，单位ms。 number - 25
hideTrack thumb滑块不展示时是否隐藏track轨道。（只隐藏，不销毁节点，节点盒子模型不变） boolean - false

Events

事件 描述 类型
update:modelValue 双向数据绑定，更新绑定的滚动距离 (distance: number) => void
scroll 需要执行滚动时触发 (distance: number) => void
touch-change 滑块手指触摸状态改变是触发 (flag: boolean) => void

Exposes

属性 描述 类型
ignoreTouch 是否忽略thumb手指触摸事件 Ref<boolean>
ignoreModelValue 是否忽略modelValue监听 Ref<boolean>
updateTrack 更新track轨道节点信息 (callback?: Function) => void
updateThumb 更新thumb滑块节点信息 () => void
resetTrack 重置track轨道节点信息 () => void
resetThumb 重置thumb滑块节点信息 () => void
updateThumbOffset 更新thumb滑块滑动距离 (distance?: number) => void
updateThumbOffsetThrottle 节流更新thumb滑块滑动距离 (distance?: number) => void

隐私、权限声明

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

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

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

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。

插件问答 我要提问

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

加载更多...