# tui-slider 滑动选择器 会员组件
介绍
滑动选择器,支持样式设置,支持区间选择。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiSlider from "@/components/thorui/tui-slider/tui-slider.vue"
export default {
components:{
tuiSlider
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|---|
升级中 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-slider": "/components/thorui/tui-slider/tui-slider"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
默认使用
changing
事件在滑动时触发,change
事件在滑动结束时触发。
<!--uni-app-->
<tui-slider @changing="changing" @change="change"></tui-slider>
<!--微信小程序-->
<tui-slider bindchanging="changing" bindchange="change"></tui-slider>
显示value值
通过 width
属性设置slider宽度,showValue
属性设置是否显示value值。
<!--uni-app-->
<tui-slider :width="width" showValue></tui-slider>
<!--微信小程序-->
<tui-slider width="{{width}}" showValue></tui-slider>
设置步长
通过 step
属性设置滑动步长。
<!--uni-app-->
<tui-slider :step="5"></tui-slider>
<!--微信小程序-->
<tui-slider step="{{5}}"></tui-slider>
区间选择
通过 section
属性设置是否为区间选择,默认为 false
。
<!--uni-app-->
<tui-slider section showValue @change="change"></tui-slider>
<!--微信小程序-->
<tui-slider section showValue bindchange="change"></tui-slider>
# Slots
插槽名称 | 说明 |
---|---|
start | 起始滑块内显示内容 |
end | 结束滑块内显示内容,区间选择时有效 |
# Props
属性名 | 类型 | 说明 | 默认值 |
---|---|---|---|
width | Number | slider宽度,单位px | 240 |
height | Number | slider高度,单位px | 4 |
border | String | slider边框 | 0 |
radius | String | slider圆角值 | 2px |
min | Number | 最小值 | 0 |
max | Number | 最大值 | 100 |
step | Number | 步长,取值必须大于 0,并且可被(max - min)整除 | false |
disabled | Boolean | 是否禁用 | 1 |
value | Number | 当前取值(起始) | 0 |
section | Boolean | 是否为区间选择/显示 | false |
endValue | Number | 当前取值(结束),section为true时生效 | 0 |
activeColor | String | 滑块左侧已选择部分的线条颜色 | #5677fc |
backgroundColor | String | 滑块右侧背景条的颜色 | #e9e9e9 |
blockWidth | Number | 滑块宽度,单位px | 20 |
blockHeight | Number | 滑块高度,单位px | 20 |
blockColor | String | 滑块背景颜色 | #fff |
blockRadius | String | 滑块圆角 | 50% |
blockShadow | String | 滑块阴影 | #b2b2b2 0 0 10rpx |
blockBorder | String | 滑块边框 | 0 |
showValue | Boolean | 是否显示当前value | false |
position | String | value显示位置,可选值:top,bottom | top |
valueFormat | String | value显示格式,如:¥value,显示时value会被替换成数值 | value |
zIndex | Number | value框z-index值 | 10 |
boxColor | String | value框颜色 | rgba(255,255,255,.9) |
padding | String | value框padding值 | 2px 6px |
valueColor | String | value字体颜色 | #333 |
valueSize | Number | value字体大小,单位rpx | 30 |
# Events
注:uni-app端绑定事件使用@前缀,如@change;微信小程序原生使用bind前缀,如bindchange
事件名 | 说明 | 回调参数 |
---|---|---|
changing | 拖动过程中触发的事件 | { value : value , endValue : 区间选择时返回 } |
change | 完成一次拖动后触发的事件 | { value : value , endValue : 区间选择时返回 } |
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 特别说明
该组件为 会员组件
,非开源内容,需开通会员才可获取使用。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |