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
;
}
|