微信小程序开发实战(11):滚动组件(picker)
时间:2022-07-22
本文章向大家介绍微信小程序开发实战(11):滚动组件(picker),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
picker组件用于从列表中选择一个item,效果有点像iOS的ActionSheet,从窗口的底部弹出,选择一个item后关闭。picker可用于选择普通的item,也可以用于选择时间和日期。
我们可以使用picker组件的mode属性设置这3种列表方式。mode可以设置的值是selector、time和date。默认值时selector。其中selector表示普通的列表,time表示时间列表,date表示日期列表。
bindchange属性也是公用的,EventHandle类型, value改变时触发change事件。
mode属性值为selector时需要设置的属性
- range:数组类型,表示picker的数据源。默认值是元素个数为0的数组([])
- value:Number类型,表示选择的item的索引,从0开始。默认值是0
mode属性值为time时需要设置的属性
- value:String类型,表示选中的时间,格式为“hh:mm”
- start:String类型,表示有效时间范围的开始,字符串格式为“hh:mm”
- end:String类型, 表示有效时间范围的结束,字符串格式为“hh:mm”
mode属性值为date时需要设置的属性
- value:String类型,默认值是0,表示选中的日期,格式为“YYYY-MM-DD”
- start:String类型,表示有效日期范围的开始,字符串格式为“YYYY-MM-DD”
- end:String类型, 表示有效日期范围的结束,字符串格式为“YYYY-MM-DD”
- fields:String类型,默认值时day,可设置的值包括year、month和day,表示选择器显示的日期例如,例如,如果设为month,日期选择器只会显示年和月,不会显示日。
下面的布局代码使用了3个picker组件演示了上述3种picker组件的使用方法。
<view style="margin:20px">
<view style="margin-left:15px">地区选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view style="padding: 13px;">
当前选择:{{array[index]}}
</view>
</picker>
</view>
<view style="margin:20px">
<view style="margin-left:15px">时间选择器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01"
bindchange="bindTimeChange">
<view style="padding: 13px;">
当前选择: {{time}}
</view>
</picker>
</view>
<view style="margin:20px">
<view style="margin-left:15px">日期选择器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01"
bindchange="bindDateChange">
<view style="padding: 13px;">
当前选择: {{date}}
</view>
</picker>
</view>
显示效果如图1所示。
图1 未显示选择列表的picker组件显示效果
点击第1个picker组件,会弹出如图2所示的列表,可上下滑动选择item,然后点击“确定”按钮,会选中该item,并显示在picker组件上。
图2 普通picker选择列表的效果
点击第2个picker组件,会弹出如图3所示的时间选择列表。
图3 时间选择列表
点击第3个picker组件,会弹出如图4所示的日期选择列表。
图4 日期选择列表
前面的布局代码,在设置日期选择列表时,未使用fields属性,如果指定fields属性,将改变日期的显示粒度,例如,下面的布局代码将fields属性值设为year。
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" fields="year" >
<view style="padding: 13px;">
当前选择: {{date}}
</view>
</picker>
布局的显示效果如图5所示,选择的结果也会以年的形式显示。
图5 只显示年的日期选择列表
- shell+curl监控网站页面(域名访问状态),并利用sedemail发送邮件
- 写稿机器人获“吴文俊奖”,能提升今日头条内容质量吗
- 使用jQuery自动缩图片 - [jQuery]
- apt-get update更新源时,出现“Hash Sum mismatch”问题
- linux下DHCP服务原理总结
- DIV的宽度自动适应功能
- 在虚拟主机上发布.Net应用的一些总结
- msmq发送速度的测试
- nfs服务部署记录
- Javascript版的Repeater控件实现
- Bootstrap笔记
- 分享一例测试环境下nginx+tomcat的视频业务部署记录
- Linq排序效率 Vs 快速排序效率
- 内存数据库到底有多快?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Cent os 7之KVM虚拟化基础管理
- 常用 Maven 命令介绍
- Linux下diff命令用法详解
- 详解Numpy中的数组拼接、合并操作
- 批量更改图像尺寸到统一大小
- 张东升,我知道是你!如何使用GAN做一个秃头生产器
- Roslyn 在 NuGet 包中放注释 xml 文件的方法
- OpenCV3 图像的加载、修改、显示与保存
- 打卡群刷题总结0727——搜索旋转排序数组 II
- dotnet 的 TaskCompletionSource 的 TrySetResult 是线程安全
- OpenCV 摄像头与视频读取并显示
- OpenCV 边缘检测
- Spring Boot 集成 WebSocket 实现服务端推送消息到客户端
- OpenCV 绘制图形
- OpenCV 图片缩放