mpx-cube-ui

# Cube-Slider

# 介绍 已适配RN

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

注意：RN模式下如果组件使用在scroll-view (opens new window)中，那么change事件可能因为上下滚动不会触发

  • scroll-view 组件在滚动过程中，不会触发其自身或子组件的 touchend 事件响应，这是 RN 底层实现导致的问题，手势系统识别当前是 scroll-view 的滚动，就会取消掉 touchend 事件的响应。
  • 安卓上如果触发了 scroll-view 组件默认的下拉刷新，binddragend可能不触发，只会触发 binddragstart

# 示例

# 基本用法

收起 
<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 class="box"></view>
    </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
  position relative
  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
.box
  position absolute
  left 50%
  height 28px
  width 28px
  transform translateX(-50%)
  padding-left 100px
  padding-right 100px
  background-color pink
  opacity 0.3
</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

# 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 弹出层 →