slider滑动选择器组件说明:
滑动选择器。
slider滑动选择器示例代码运行效果如下：
下面是WXML代码：
[XML]
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<
view
class
=
"section section_gap"
>
<
text
class
=
"section__title"
>设置left/right icon</
text
>
<
view
class
=
"body-view"
>
<
slider
bindchange
=
"slider1change"
left-icon
=
"cancel"
right-icon
=
"success_no_circle"
/>
</
view
>
</
view
>
<
view
class
=
"section section_gap"
>
<
text
class
=
"section__title"
>设置step</
text
>
<
view
class
=
"body-view"
>
<
slider
bindchange
=
"slider2change"
step
=
"5"
/>
</
view
>
</
view
>
<
view
class
=
"section section_gap"
>
<
text
class
=
"section__title"
>显示当前value</
text
>
<
view
class
=
"body-view"
>
<
slider
bindchange
=
"slider3change"
show-value/>
</
view
>
</
view
>
<
view
class
=
"section section_gap"
>
<
text
class
=
"section__title"
>设置最小/最大值</
text
>
<
view
class
=
"body-view"
>
<
slider
bindchange
=
"slider4change"
min
=
"50"
max
=
"200"
show-value/>
</
view
>
</
view
>
|
下面是JS代码：
[JavaScript]
纯文本查看 复制代码
|
1
2
3
4
5
6
7
8
9
|
var
pageData = {}
for
(
var
i = 1; i < 5; i++) {
(
function
(index) {
pageData[
'slider'
+ index +
'change'
] =
function
(e) {
console.log(
'slider'
+
'index'
+
'发生 change 事件，携带值为'
, e.detail.value)
}
})(i)
}
Page(pageData)
|
下面是WXSS代码：
[CSS]
纯文本查看 复制代码
|
1
2
3
4
5
6
7
|
.page {
min-height
:
100%
;
flex:
1
;
background-color
:
#FBF9FE
;
font-size
:
32
rpx;
overflow
:
hidden
;
}
|
slider滑动选择器的主要属性
属性名
类型
默认值
说明
minNumber0最小值
maxNumber100最大值
stepNumber1步长，取值必须大于0，并且可被(max - min)整除
disabledBooleanfalse是否禁用
valueNumber0当前取值
show-valueBooleanfalse是否显示当前 value
bindchangeEventHandle完成一次拖动后触发的事件，event.detail = {value: value}个人经验:min为负数
滑动选择器。
既然min和max是Number类型，那么将min设置为负数是否可以？
下面是WXML代码：
[XML]
纯文本查看 复制代码
|
1
2
3
4
5
6
|
<
view
class
=
"section section_gap"
>
<
text
class
=
"section__title"
>设置最小/最大值</
text
>
<
view
class
=
"body-view"
>
<
slider
bindchange
=
"slider4change"
min
=
"-10"
max
=
"20"
show-value/>
</
view
>
</
view
>
|
下面是JS代码：
[JavaScript]
纯文本查看 复制代码
|
1
2
3
4
5
6
7
8
9
|
var
pageData = {}
for
(
var
i = 1; i < 5; i++) {
(
function
(index) {
pageData[
'slider'
+ index +
'change'
] =
function
(e) {
console.log(
'slider'
+
'index'
+
'发生 change 事件，携带值为'
, e.detail.value)
}
})(i)
}
Page(pageData)
|
下面是WXSS代码：
[CSS]
纯文本查看 复制代码
|
1
2
3
4
5
6
7
|
.page {
min-height
:
100%
;
flex:
1
;
background-color
:
#FBF9FE
;
font-size
:
32
rpx;
overflow
:
hidden
;
}
|
分析：可以看到min可以设置为负数，而且，默认滑块显示到0的位置（说明value这个属性是控制这个的）。然后还可以往左拖动，然后显示出负数；
个人经验:min如果大于max
我以为会报错，结果出乎我的意料。它居然不报错，然后显示到max位置，滑块也是不能够拖动的。这是一个明显的大坑啊！
下面是WXML代码：
[XML]
纯文本查看 复制代码
|
1
2
3
4
5
6
|
<
view
class
=
"section section_gap"
>
<
text
class
=
"section__title"
>设置最小/最大值</
text
>
<
view
class
=
"body-view"
>
<
slider
bindchange
=
"slider4change"
min
=
"100"
max
=
"20"
show-value/>
</
view
>
</
view
>
|
下面是JS代码：
[JavaScript]
纯文本查看 复制代码
|
1
2
3
4
5
6
7
8
9
|
var
pageData = {}
for
(
var
i = 1; i < 5; i++) {
(
function
(index) {
pageData[
'slider'
+ index +
'change'
] =
function
(e) {
console.log(
'slider'
+
'index'
+
'发生 change 事件，携带值为'
, e.detail.value)
}
})(i)
}
Page(pageData)
|
下面是WXSS代码：
[CSS]
纯文本查看 复制代码
|
1
2
3
4
5
6
7
|
.page {
min-height
:
100%
;
flex:
1
;
background-color
:
#FBF9FE
;
font-size
:
32
rpx;
overflow
:
hidden
;
}
|
这个控件估计后面会改吧。请大家避免这个坑。
另外，max还可以和min相等。
个人经验:两个滑块
我之前用过slider，人家滑块可以是设置两个的。这个文档上没写，我也是够了，只能说不成熟吧。
个人经验:使用wx.showToast显示value
除了默认的显示方式，我们还可以用toast方式显示选择的值
下面是WXML代码：
[XML]
纯文本查看 复制代码
|
1
2
3
4
5
6
|
<
view
class
=
"section section_gap"
>
<
text
class
=
"section__title"
>使用toast显示当前value</
text
>
<
view
class
=
"body-view"
>
<
slider
bindchange
=
"slider3change"
min
=
"0"
max
=
"20"
step
=
"5"
/>
</
view
>
</
view
>
|
下面是JS代码：
[JavaScript]
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
var
pageData = {}
for
(
var
i = 1; i < 5; i++) {
(
function
(index) {
pageData[
'slider'
+ index +
'change'
] =
function
(e) {
console.log(
'slider'
+
'index'
+
'发生 change 事件，携带值为'
, e.detail.value)
wx.showToast({
title:
'您选择了'
+ e.detail.value,
icon:
'success'
,
duration: 2000
})
}
})(i)
}
Page(pageData)
|
下面是WXSS代码：
[CSS]
纯文本查看 复制代码
|
1
2
3
4
5
6
7
|
.page {
min-height
:
100%
;
flex:
1
;
background-color
:
#FBF9FE
;
font-size
:
32
rpx;
overflow
:
hidden
;
}
|