更新记录

1.0.0（2023-08-25） 下载此版本

首发

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
√ √ √ √
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

滑块选择器，slider ，视频播放进度条等多场景应用，可以用图片滑块，功能高度自定义

支持app，小程序，h5

使用方法

<hao-slider ref="haoSlider"></hao-slider>

属性说明

名称 类型 默认值 描述
imgSliderUrl String 空 图片链接，有则图片代替滑块
max Number 100 最大值
min Number 0 最小值
value Number 0 当前值
step Number 1 步长，取值必须大于 0，并且可被(max - min)整除
isDisabled Boolean false 是否禁用
sliderHeight Number 8 滑条高度(rpx)
sliderWidth Number null 滑条宽度(rpx),默认100%
sliderBlockSize Number 30 滑块大小(rpx)
sliderRightColor String #e9e9e9 滑块右侧背景色
sliderLeftColor String #2e8857 滑块左侧已选择背景色
sliderBgColor String #ffffff 滑块颜色
sliderBlockShadow String 0 0 16rpx #fff 滑块阴影(当滑块不是图片时有效)
borderRadius String 8rpx 当前值提示窗圆角值(rpx)
tipSize Number 22 value提示的文字大小(rpx)
isSliderTop Boolean false 是否让滑块在滑条上方
topSpacing Number 8 滑块离滑条的间距(isSliderTop为true时有效)
isTip Boolean true 是否显示滑块上方当前值
tipBlockSpacing Number 20 提示值与滑块或滑条的间距

Event 事件

事件名 说明 类型 回调参数
change 点击跳转滑块时 emit 返回当前值
end 结尾时触发 emit 空
changeing 拖拽滑块时 emit 返回当前值
start 点击滑块时触发 emit 空

ref事件

获取当前值

let currentTime = this.$refs.haoSlider.getCurrentValue();

隐私、权限声明

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

无

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

无

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

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

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

加载更多...