1.5.1 • Published 1 year ago

@wines/slider v1.5.1

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

@wines/slider

Slider 滑动选择器

用于在一个区间内选择特定值。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Slider",
  "usingComponents": {
    "wux-icon": "@wines/icon",
    "wux-slider": "@wines/slider"
  }
}

示例

该组件内部会依据传入的 defaultValue 或 value 参数的长度，设置对应个数的滑块，默认只显示一个滑块。

<view class="page">
	<view class="page__hd">
		<view class="page__title">Slider</view>
		<view class="page__desc">滑动选择器</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<view class="sub-title">Default</view>
		<wux-slider defaultValue="{{ [10] }}" />
		<view class="sub-title">Custom tip</view>
		<wux-slider defaultValue="{{ [10] }}" tipFormatter="{d} %" />
		<view class="sub-title">No tip</view>
		<wux-slider defaultValue="{{ [10] }}" tipFormatter="" />
		<view class="sub-title">Disabled</view>
		<wux-slider defaultValue="{{ [10] }}" disabled />
		<view class="sub-title">Show value</view>
		<wux-slider defaultValue="{{ [10] }}" showValue />
		<view class="sub-title">Use icons</view>
		<wux-slider defaultValue="{{ [10] }}">
			<wux-icon wux-class="min" type="ios-volume-mute" slot="min" />
			<wux-icon wux-class="max" type="ios-volume-high" slot="max" />
		</wux-slider>
		<view class="sub-title">Step = 10</view>
		<wux-slider defaultValue="{{ [10] }}" showValue step="10" />
		<view class="sub-title">Show mark</view>
		<wux-slider
		 defaultValue="{{ [100] }}"
		 showMark
		 step="25"
		 markStyle="background-color: red"
		/>
		<wux-slider
		 defaultValue="{{ [100] }}"
		 showMark
		 step="25"
		 markStyle="{{ ['background-color: red', 'background-color: yellow', 'background-color: blue'] }}"
		/>
		<view class="sub-title">Min and max</view>
		<wux-slider
		 defaultValue="{{ [12] }}"
		 showValue
		 step="11"
		 min="0"
		 max="88"
		/>
		<view class="sub-title">Controlled</view>
		<wux-slider
		 value="{{ value }}"
		 controlled
		 bind:change="onChange"
		 bind:afterChange="afterChange"
		/>
		<view class="sub-title">Custom style</view>
		<wux-slider
		 defaultValue="{{ [10] }}"
		 railStyle="background-color: blue"
		 trackStyle="background-color: red"
		 handleStyle="background-color: yellow"
		/>
		<wux-slider
		 defaultValue="{{ [10, 30, 50] }}"
		 railStyle="background-color: blue"
		 trackStyle="{{ ['background-color: red', 'background-color: yellow'] }}"
		 handleStyle="{{ ['background-color: yellow', 'background-color: red', 'background-color: blue'] }}"
		/>
		<view class="sub-title">Range = 2</view>
		<wux-slider defaultValue="{{ [10, 30] }}" />
		<view class="sub-title">Range = 3</view>
		<wux-slider defaultValue="{{ [10, 30, 50] }}" />
	</view>
</view>
import './index.less';
Page({
  data: {
    value: [0],
  },
  onChange(e) {
    console.log('onChange', e.detail.value);
    this.setData({ value: e.detail.value });
  },
  afterChange(e) {
    console.log('afterChange', e.detail.value);
    this.setData({ value: e.detail.value });
  },
});

Slider 滑动选择器

用于在一个区间内选择特定值。

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "Slider",
    "usingComponents": {
        "wux-icon": "../../dist/icon/index",
        "wux-slider": "../../dist/slider/index"
    }
}

示例

!> 该组件内部会依据传入的 defaultValue 或 value 参数的长度，设置对应个数的滑块，默认只显示一个滑块。

<view class="page">
    <view class="page__hd">
        <view class="page__title">Slider</view>
        <view class="page__desc">滑动选择器</view>
    </view>
    <view class="page__bd page__bd_spacing">
        <view class="sub-title">Default</view>
        <wux-slider defaultValue="{{ [10] }}" />
        <view class="sub-title">Custom tip</view>
        <wux-slider defaultValue="{{ [10] }}" tipFormatter="{d} %" />
        <view class="sub-title">No tip</view>
        <wux-slider defaultValue="{{ [10] }}" tipFormatter="" />
        <view class="sub-title">Disabled</view>
        <wux-slider defaultValue="{{ [10] }}" disabled />
        <view class="sub-title">Show value</view>
        <wux-slider defaultValue="{{ [10] }}" showValue />
        <view class="sub-title">Use icons</view>
        <wux-slider defaultValue="{{ [10] }}">
            <wux-icon wux-class="min" type="ios-volume-mute" slot="min" />
            <wux-icon wux-class="max" type="ios-volume-high" slot="max" />
        </wux-slider>
        <view class="sub-title">Step = 10</view>
        <wux-slider defaultValue="{{ [10] }}" showValue step="10" />
        <view class="sub-title">Show mark</view>
        <wux-slider defaultValue="{{ [100] }}" showMark step="25" markStyle="background-color: red" />
        <wux-slider defaultValue="{{ [100] }}" showMark step="25" markStyle="{{ ['background-color: red', 'background-color: yellow', 'background-color: blue'] }}" />
        <view class="sub-title">Min and max</view>
        <wux-slider defaultValue="{{ [12] }}" showValue step="11" min="0" max="88" />
        <view class="sub-title">Controlled</view>
        <wux-slider value="{{ value }}" controlled bind:change="onChange" bind:afterChange="afterChange" />
        <view class="sub-title">Custom style</view>
        <wux-slider defaultValue="{{ [10] }}" railStyle="background-color: blue" trackStyle="background-color: red" handleStyle="background-color: yellow" />
        <wux-slider defaultValue="{{ [10, 30, 50] }}" railStyle="background-color: blue" trackStyle="{{ ['background-color: red', 'background-color: yellow'] }}" handleStyle="{{ ['background-color: yellow', 'background-color: red', 'background-color: blue'] }}" />
        <view class="sub-title">Range = 2</view>
        <wux-slider defaultValue="{{ [10, 30] }}" />
        <view class="sub-title">Range = 3</view>
        <wux-slider defaultValue="{{ [10, 30, 50] }}" />
    </view>
</view>
Page({
	data: {
		value: [0],
	},
	onChange(e) {
		console.log('onChange', e.detail.value)
		this.setData({ value: e.detail.value })
	},
	afterChange(e) {
		console.log('afterChange', e.detail.value)
		this.setData({ value: e.detail.value })
	},
})

视频演示

Slider

API

Slider props

参数类型描述默认值
prefixClsstring自定义类名前缀wux-slider
minnumber最小值0
maxnumber最大值100
stepnumber步长，取值必须大于 0，并且可被 (max - min) 整除1
defaultValuearray默认值，当 controlled 为 false 时才生效0
valuearray当前值，当 controlled 为 true 时才生效0
controlledboolean是否受控 说明文档false
disabledboolean是否禁用false
showMarkboolean是否显示间断点，建议在 step 间隔不密集时使用false
showValueboolean,object是否显示最小、大值，参数支持对象格式如 { min: false, max: true }false
tipFormatterstring格式化当前滑块的值并显示 tip，当其为空时隐藏 tip。（{d} 为固定写法会被转化为当前滑块的值，如 {d} % 转化为 n %）{d}
markStylestring,object,array间断点的样式，参数支持数组格式如 [ 'background-color: red' ]-
handleStylestring,object,array滑块的样式，参数支持数组格式如 [ 'background-color: red' ]-
trackStylestring,object,array选中部分滑动条的样式，参数支持数组格式如 [ 'background-color: red' ]-
railStylestring,object未选中部分的样式-
wrapStylestring,object自定义 wrap 样式-
bind:changefunction拖动过程中触发的回调函数 event.detail = { value: value, offsets: offsets }-
bind:afterChangefunction完成一次拖动后触发的回调函数 event.detail = { value: value, offsets: offsets }-

Slider slot

名称描述
min自定义左侧内容，当 showValue.min 为 false 时才生效
max自定义右侧内容，当 showValue.max 为 false 时才生效

Slider externalClasses

名称描述
wux-class根节点样式类
@wines/core@wines/styles
@infinitebrahmanuniverse/nolb-_win@everything-registry/sub-chunk-1016
1.5.1

1 year ago

1.5.0

1 year ago

1.3.5

2 years ago

1.4.0

2 years ago

1.3.2

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago