微信小程序组件解读和分析:十四、slider滑动选择器
2024-08-30 16:23:32
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] 纯文本查看 复制代码
最新文章
- clr enabled Server Configuration Option
- [转载]HDU 3478 判断奇环
- JSTL的test里的逻辑判断不能有空格
- 由struts错误使用引发的漏洞,使用参数作为返回的文件路径或文件名,作为返回result 值
- OpenCV Open Camera 打开摄像头
- codeforces 520 Pangram
- thymeleaf中的Literals
- PHP学习之[第04讲]PHP5.4 运算符、流程控制
- IOS开发教程之put上传文件的服务器的配置及实例分享-备用
- windows系统部署discuz并和javaweb账号连通同步
- 17232 伪Acmer的推理(传递闭包)
- centos7之zabbix简单检查之端口监控
- mycat使用之MySQL单库分表及均分数据
- JQ remove()方法实现似收货地址逐一删除的效果
- day 08文件与字符编码
- Redis命令操作详解
- socket.io笔记三之子命名空间的socket连接
- L1-027 出租
- Mybatis 源码分析之事物管理
- (转) java中try/catch性能和原理