mpx-cube-ui

# Cube-Slider

# 介绍 已适配RN

滑动选择器（基于touch事件拖动滑块儿，请在移动端环境下体验）。

# 示例

# 基本用法

收起 
<template>
  <cube-slider
    bindchange="handleChange"
    bindchanging="handleChanging"
  >
  </cube-slider>
</template>

<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    data: {
      currentValue: 0
    },
    methods: {
      handleChange(e) {
        this.currentValue = e.detail.value
        console.log('change', this.currentValue)
      },
      handleChanging(e) {
        this.currentValue = e.detail.value
        console.log('changing', this.currentValue)
      }
    }
  })
</script>
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

# 设置step

收起 
<cube-slider
  step="{{ 5 }}"
  bindchange="handleChange"
  bindchanging="handleChanging"
>
</cube-slider>
1
2
3
4
5
6

# 显示当前value

收起 
<cube-slider
  show-value="{{true}}"
  bindchange="handleChange"
  bindchanging="handleChanging"
>
</cube-slider>
1
2
3
4
5
6

# 设置最小值/最大值

收起 
<cube-slider
  min="{{ 50 }}"
  max="{{ 200 }}"
  show-value="{{true}}"
  bindchange="handleChange"
  bindchanging="handleChanging"
>
</cube-slider>
1
2
3
4
5
6
7
8

# 自定义滑块儿

设置

custom-content="{{true}}"
1

并添加自定义插槽。

收起 
<template>
  <cube-slider
    value="{{ 30 }}"
    custom-content="{{true}}"
    bindchange="handleChange"
    bindchanging="handleChanging"
  >
    <view class="slider-thumb"></view>
  </cube-slider>
</template>

<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    data: {
      currentValue: 0
    },
    methods: {
      handleChange(e) {
        this.currentValue = e.detail.value
        console.log('change', this.currentValue)
      },
      handleChanging(e) {
        this.currentValue = e.detail.value
        console.log('changing', this.currentValue)
      }
    }
  })
</script>

<style lang="stylus">
.slider-thumb
  width: 100%
  height: 100%
  background-image: url("https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_E57CMf3cLCRJiq2VxPuT")
  background-size: contain
  background-repeat: no-repeat
  background-position: 0 6px
</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

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
min 最小值 Number - 0
max 最大值 Number - 100
step 步长，取值必须大于 0，并且可被(max - min)整除 Number - 1
disabled 是否禁用 Boolean - false
value 当前取值 Number - 0
color 背景条的颜色（请使用 backgroundColor） String - -
selected-color 已选择的颜色（请使用 activeColor） String - -
activeColor 已选择的颜色 String - -
backgroundColor 背景条的颜色 String - -
block-size 滑块的大小，取值范围为 12 - 28 Number - 28
block-color 滑块的颜色 String - -
show-value 是否显示当前 value Boolean - false
showValue 是否显示当前 value Boolean - false
customContent customContent Boolean - false

# Events

事件名 说明 参数
changing 拖动过程中触发的事件 event.detail = {value}

# Slots

插槽名 说明
— (默认插槽) 自定义滑块儿

# CSS Variable

css 变量使用示例

变量名 默认值 含义
--cube-slider-active-color 已选择的颜色
--cube-slider-background-color
#e9e9e9
 背景条的颜色
--cube-slider-block-color
#ffffff
 滑块的颜色
--cube-slider-track-height
2px
 轨道高度

← Popup 弹出层 →