# 12.6 滑动柄
# midea-seek-bar slider 滑动柄
可拖拽柄组件
APP内置组件，可直接在template中使用，不需要import导入和注册 。
# 实例 :
# 基础用法
<template>
<div class="wrapper">
<dof-minibar
title="滑动柄"
@dofMinibarLeftButtonClicked="back"
></dof-minibar>
<midea-seek-bar
class="seekbar"
:max="max"
:min="min"
:value="value"
:unit="unit"
:showTip="showTip"
:step="step"
:axisH="axisH"
:pointH="pointH"
:pointColor='pointColor'
:axisColor='axisColor'
:axisBgColor="axisBgColor"
:disable='disable'
@slideChange="slideEnd"
@slideEnd="slideEnd">
</midea-seek-bar>
</div>
</template>
<script>
import { DofMinibar } from 'dolphin-weex-ui'
export default {
components: { DofMinibar },
data() {
return {
max: 100, //最大值
min: 0, //最小值
value: 50,
unit:"这是自定义提示", //tips描述
showTip: true,
step: 5, //步长
axisH: 10, //轴高度(px)
pointH: 18, //圆球高度（px)
axisColor: '#DFE5E7', // 滑条未拖动时颜色
pointColor:"#23aaf2", // 圆球颜色
axisBgColor:"#7130d3", // 滑条拖动后背景颜色
disable:false
}
},
computed: {
// 针对不同的数值和状态可以更改颜色数据
// 滑条拖动后背景颜色axisBgColor(){}
// 圆球颜色 pointColor(){}
},
methods: {
slideEnd(event) {
},
slideChange(event) {
}
}
}
</script>
<style scoped>
.wrapper {
width: 750px;
}
.seekbar {
width: 750px;
height: 450px;
margin-top: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
max | Number | Y | - | 自定义最大值 |
min | Number | Y | - | 自定义最小值 |
value | Number | N | - | 默认值 |
unit | String | N | - | 这是自定义提示text, tip提示语的单位，默认：%，只有showTip属性为true时候，该属性才起作用 |
showTip ^6.5.0 | Boolean | N | false | 是否显示自定义tip，app v6.5.0 以上版本支持 |
step | Number | N | 1 | 索引，同一个页面循环显示多个sliders会用到，区别每个slider |
index | String | N | 1 | 步长 |
axisH | Number | N | - | 滑动轴高度(px) |
pointH | Number | N | - | 滑动圆球高度（px) |
axisColor | String | Y | transparent | 滑条未拖动时颜色 |
axisAlpha | String | Y | 1 | 滑条未滑到的区域的透明度，范围0~1,默认1，不透明 |
pointColor | String | Y | transparent | 圆球颜色 |
axisBgColor | String | Y | transparent | 滑条拖动后背景颜色 |
axisBgAlpha | String | N | 1 | 滑条滑到的区域的透明度，范围0~1,默认1，不透明 |
sliderImage | String | N | - | 滑球图片的base64 |
axisStartColor | String | N | 1 | 滑条未滑到的区域显示的颜色 (渐变色开始) |
axisEndColor | String | N | 1 | 滑条未滑到的区域显示的颜色 (渐变色结束) |
disable | Boolean | N | false | 是否不可滑动 |
slideImage | number | N | - | 白色圆点相对bar 右侧 的滑动距离 |
isOneStepSlider | Boolean | N | false | 兼容家用UI效果 |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
slideChange | 滑动柄value变化事件 | event |
slideEnd | 滑动柄value滑动结束事件 | event |