低代码高性能原生UI框架Slider
组件类型：UxSliderComponentPublicInstance
支持双滑块、竖向滑动，可设置步长和最小值、最大值
平台兼容性
UniApp X
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | √ |
UniApp Vue Nvue
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| x | x | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| name | String | 标识符，在回调事件中返回 | |
| theme | String | 主题颜色 | |
| mode | String | normal | 模式 |
| direction | String | horizontal | 方向 |
| min | Number | 0 | 最小值 |
| max | Number | 100 | 最大值 |
| step | Number | 1 | 步长，取值必须大于0，并且可被(max-min)整除 |
| value | Number | 当前取值 | |
| activeColor | String | $ux.Conf.primaryColor | 已选择部分的线条颜色 |
| activeDark | String | none | 深色none-不显示，auto-自动适配深色模式，其他-颜色 |
| backgroundColor | String | #e0e0e0 | 背景条颜色 |
| backgroundDark | String | #a9a9a9 | 深色none-不显示，auto-自动适配深色模式，其他-颜色 |
| blockSize | Any | 18 | 滑块的大小 |
| blockColor | String | #ffffff | 滑块颜色 |
| blockDark | String | none | 深色none-不显示，auto-自动适配深色模式，其他-颜色 |
| borderColor | String | #e6e6e6 | 滑块边框颜色 |
| showValue | Boolean | false | 是否显示当前value |
| showMode | String | top | 显示方式 |
| size | Any | 2 | 尺寸 |
| corner | Any | 0 | 圆角仅web支持 |
| unit | String | % | 单位 |
| disabled | Boolean | 是否禁用 | |
| margin | Array | 边距[上右下左][上下左右][上下左右] | |
| mt | Any | 距上单位px | |
| mr | Any | 距右单位px | |
| mb | Any | 距下单位px | |
| ml | Any | 距左单位px | |
| padding | Array | 填充[上右下左][上下左右][上下左右] | |
| pt | Any | 上内边距单位px | |
| pr | Any | 右内边距单位px | |
| pb | Any | 下内边距单位px | |
| pl | Any | 左内边距单位px |
theme
| 值 | 说明 |
|---|---|
| primary | 主色 |
| warning | 警告 |
| success | 成功 |
| error | 错误 |
| info | 文本 |
mode
| 值 | 说明 |
|---|---|
| normal正常 | |
| range范围 |
direction
| 值 | 说明 |
|---|---|
| horizontal水平 | |
| vertical垂直 |
activeDark
| 值 | 说明 |
|---|---|
| none不显示 | |
| auto自动适配深色模式 | |
| color其他颜色 |
backgroundDark
| 值 | 说明 |
|---|---|
| none不显示 | |
| auto自动适配深色模式 | |
| color其他颜色 |
blockDark
| 值 | 说明 |
|---|---|
| none不显示 | |
| auto自动适配深色模式 | |
| color其他颜色 |
showMode
| 值 | 说明 |
|---|---|
| up上方跟随 | |
| bottom下方跟随 |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| change | 完成一次拖动后触发的事件 | |
| changing | 拖动过程中触发的事件 |
示例代码
html
<template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :bold="true">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-scroll :disabled="moving">
<ux-card direction="column" icon="flag-filled" title="滑动选择器" :bold="true">
<ux-text text="支持双滑块、竖向滑动，可设置步长和最小值、最大值"></ux-text>
</ux-card>
<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
<ux-col>
<ux-slider :value="value1" @changing="changing1"></ux-slider>
<ux-slider theme="warning" :value="value1" @changing="changing1" @touchstart="touchstart" @touchend="touchend"></ux-slider>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="双滑块" :bold="true">
<ux-text :text="`值：${value2.join(', ')}`" :mb="15"></ux-text>
<ux-row>
<ux-slider :values="value2" mode="range" :showValue="true" show-mode="up" :size="4" @changing="changing2" @touchstart="touchstart" @touchend="touchend"></ux-slider>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自定义范围" :bold="true">
<ux-text :text="`值：${value3}`" :mb="15"></ux-text>
<ux-row style="width: 300px;">
<ux-slider :value="value3" :min="20" :max="180" :showValue="true" show-mode="bottom" active-color="red" @changing="changing3" @touchstart="touchstart" @touchend="touchend"></ux-slider>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="步长" :bold="true">
<ux-text :text="`可指定步长(每次步进5)：${value4}`" :mb="15"></ux-text>
<ux-row>
<ux-slider :value="value4" :step="5" block-color="blue" @changing="changing4" @touchstart="touchstart" @touchend="touchend"></ux-slider>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="竖向" :bold="true">
<ux-text :text="`支持竖向滑动：${value5}`" :mb="15"></ux-text>
<ux-row style="height: 300px;">
<ux-slider :value="value5" :showValue="true" show-mode="up" direction="vertical" :size="4" @changing="changing5" @touchstart="touchstart" @touchend="touchend"></ux-slider>
<ux-slider style="margin-left: 15px;" :values="value2" mode="range" :showValue="true" :size="8" :corner="4" show-mode="bottom" direction="vertical" @changing="changing2" @touchstart="touchstart" @touchend="touchend"></ux-slider>
</ux-row>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page :stack="showDoc">
<ux-navbar :title="title" :bold="true">
<template v-slot:right>
<!-- #ifndef MP -->
<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
<!-- #endif -->
</template>
</ux-navbar>
<ux-scroll :disabled="moving">
<ux-card direction="column" icon="flag-filled" title="滑动选择器" :bold="true">
<ux-text text="支持双滑块、竖向滑动，可设置步长和最小值、最大值"></ux-text>
</ux-card>
<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
<ux-col>
<ux-slider :value="value1" @changing="changing1"></ux-slider>
<ux-slider theme="warning" :value="value1" @changing="changing1" @touchstart="touchstart" @touchend="touchend"></ux-slider>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="双滑块" :bold="true">
<ux-text :text="`值：${value2.join(', ')}`" :mb="15"></ux-text>
<ux-row>
<ux-slider :values="value2" mode="range" :showValue="true" show-mode="up" :size="4" @changing="changing2" @touchstart="touchstart" @touchend="touchend"></ux-slider>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自定义范围" :bold="true">
<ux-text :text="`值：${value3}`" :mb="15"></ux-text>
<ux-row style="width: 300px;">
<ux-slider :value="value3" :min="20" :max="180" :showValue="true" show-mode="bottom" active-color="red" @changing="changing3" @touchstart="touchstart" @touchend="touchend"></ux-slider>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="步长" :bold="true">
<ux-text :text="`可指定步长(每次步进5)：${value4}`" :mb="15"></ux-text>
<ux-row>
<ux-slider :value="value4" :step="5" block-color="blue" @changing="changing4" @touchstart="touchstart" @touchend="touchend"></ux-slider>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="竖向" :bold="true">
<ux-text :text="`支持竖向滑动：${value5}`" :mb="15"></ux-text>
<ux-row style="height: 300px;">
<ux-slider :value="value5" :showValue="true" show-mode="up" direction="vertical" :size="4" @changing="changing5" @touchstart="touchstart" @touchend="touchend"></ux-slider>
<ux-slider style="margin-left: 15px;" :values="value2" mode="range" :showValue="true" :size="8" :corner="4" show-mode="bottom" direction="vertical" @changing="changing2" @touchstart="touchstart" @touchend="touchend"></ux-slider>
</ux-row>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
import * as plus from '@/uni_modules/ux-plus'
import { UxSliderEvent } from '@/uni_modules/ux-frame'
const title = ref('')
const value1 = ref(20)
const value2 = ref<number[]>([10, 80] as number[])
const value3 = ref(30)
const value4 = ref(60)
const value5 = ref(50)
const moving = ref(false)
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/slider.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
onLoad((e) => {
title.value = e['title'] ?? ''
})
function changing1(e: UxSliderEvent) {
value1.value = e.value
}
function changing2(e: UxSliderEvent) {
value2.value = e.values
}
function changing3(e: UxSliderEvent) {
value3.value = e.value
}
function changing4(e: UxSliderEvent) {
value4.value = e.value
}
function changing5(e: UxSliderEvent) {
value5.value = e.value
}
function touchstart() {
moving.value = true
}
function touchend() {
moving.value = false
}
</script><script setup>
import * as plus from '@/uni_modules/ux-plus'
import { UxSliderEvent } from '@/uni_modules/ux-frame'
const title = ref('')
const value1 = ref(20)
const value2 = ref<number[]>([10, 80] as number[])
const value3 = ref(30)
const value4 = ref(60)
const value5 = ref(50)
const moving = ref(false)
const showDoc = ref(false)
function onDoc() {
plus.openWeb({
title: '在线文档',
url: 'https://www.uxframe.cn/component/slider.html',
// blur: 1,
success: () => {
showDoc.value = true
},
complete: () => {
showDoc.value = false
}
})
}
onLoad((e) => {
title.value = e['title'] ?? ''
})
function changing1(e: UxSliderEvent) {
value1.value = e.value
}
function changing2(e: UxSliderEvent) {
value2.value = e.values
}
function changing3(e: UxSliderEvent) {
value3.value = e.value
}
function changing4(e: UxSliderEvent) {
value4.value = e.value
}
function changing5(e: UxSliderEvent) {
value5.value = e.value
}
function touchstart() {
moving.value = true
}
function touchend() {
moving.value = false
}
</script>css
<style lang="scss">
</style><style lang="scss">
</style>