微信小程序picker组件简单用法示例
作者:xxiaowen 发布时间:2023-07-23 10:49:32
标签:微信小程序,picker组件
本文实例讲述了微信小程序picker组件简单用法。分享给大家供大家参考,具体如下:
picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode=selector),时间选择器(mode=time),日期选择器(mode=date),默认是普通选择器。
具体功能说明如下:
普通选择器:mode=selector
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
range | Array | [] | mode为selector时,range有效 |
value | Number | 0 | mode为selector时,是数字,表示选择了range中的第几个,从0开始。 |
bindchange | EventHandle | value改变时触发change事件,event.detail= { value:value} |
时间选择器:mode=time
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | 表示选中的时间,格式为"hh:mm" | |
start | String | 表示有效时间范围的开始,字符串格式为"hh:mm" | |
end | String | 表示有效时间范围的结束,字符串格式为"hh:mm" | |
bindchange | EventHandle | value改变时触发change事件,event.detail= { value:value} |
日期选择器:mode=date
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | 0 | 表示选中的日期,格式为"yyyy-MM-dd" |
start | String | 表示有效日期范围的开始,字符串格式为"yyyy-MM-dd" | |
end | String | 表示有效日期范围的结束,字符串格式为"yyyy-MM-dd" | |
fields | String | day | 有效值year,month,day,表示选择器的粒度 |
bindchange | EventHandle | value改变时触发change事件,event.detail= { value:value} |
示例代码如下:
picker.wxml:
<view class="section">
<view class="section__title">地区选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择:{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">时间选择器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
当前选择: {{time}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">日期选择器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
</view>
picker.js:
Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
index: 0,
date: '2016-09-01',
time: '12:01'
},
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindDateChange: function(e) {
this.setData({
date: e.detail.value
})
},
bindTimeChange: function(e) {
this.setData({
time: e.detail.value
})
}
})
简单样式布局picker.wxss:
.section {
display: flex;
flex-direction: column;
padding: 20rpx 0rpx;
color: #333;
}
.section__title{
font-size: 40rpx;
margin: 10rpx 0rpx;
}
运行效果:
希望本文所述对大家微信小程序开发有所帮助。
来源:http://blog.csdn.net/wenzhilanyu2012/article/details/53444527
0
投稿
猜你喜欢
- 在matlab中,存在执行直接得函数来添加高斯噪声和椒盐噪声。Python-OpenCV中虽然不存在直接得函数,但是很容易使用相关的函数来实
- (1)OracleServiceSID 数据库服务,这个服务会自动地启动和停止数据库。如果安装了一个数据库,它的缺省启动类型为自动。服务进程
- 一、前言在学习深度学习会发现都比较爱用python这个argparse,虽然基本能理解,但没有仔细自己动手去写,因此这里写下来作为自己本人的
- matplotlib官方除了提供了鼠标十字光标的示例,还提供了同一图像内多子图共享光标的示例,其功能主要由widgets模块中的MultiC
- 1.建立设计规范的意义 建立设计文档的根本目的
- 描述 嵌入在你的web页面中的导航元素能够降低你的搜索引擎评价排名并且降低你的网站的响应性能。本文作者想同你一起探讨如何使用AJAX技术来解
- 网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为IE 6.0 / IE 7.0 / firefox 2 / Opera
- 如何用FILESYSTEMOBJECT组件来做一个站内搜索?看看下面我们提供的例子,主要由searchpage.htm和searchresu
- 如果你看过YUI的RAW源码,会发现很多跟javadoc语法类似的注释。据说(via)是使用JSDoc这个工具。但我探索了一遍,发现YUI多
- 看过数据库的备份与还原。大多数都是用组件来完成的。其实可通过sql语句来完成。 由于时间关系,未对参数进行验证和界面美化。代码
- 说绘画语言,西方的油画是人类视觉语言里怎么也不能忽略的浓烈一笔。14~15世纪,蛋彩画——油画前身的发明,绘画可以使用均匀过渡的色彩渐变,并
- 说明:本函数作用是截取指定英汉混合字符串,并保持显示长度一至。就是将一个汉字当两英文来截取。用途:一般会用在标题显示列表,可以避免截取的字符
- blankzheng的blog:http://www.planabc.net/1、使用fieldset和legend标签在form中,我们经
- alt的准确含义是,当照片不存在或者load错误时的提示。但同时img也同时支持alt和title,再有某些浏览器的错误解析,因此经常被误导
- 打开链接是在新窗口还是原窗口是一个最基础的交互方式。但是很多项目进行中,我们的原型设计并没有仔细考虑链接打开方式。而为了满足运营的需要,选择
- 在写ASP网页时常用的检测代码:服务器现在时间:<% =now %>服务器CPU型号:<%=Request.ServerV
- 用JDBC实现对MySQL的“增删改查”:import java.sql.Connection;im
- PS笔刷,样式,形状、渐变、滤镜载入方式及使用:1、笔刷载入方式: 打开PS,编辑-->预设管理器-->载入-->然后点你
- 但是有时候,可以视看处进逻辑程度,可以把三者写成一个触发器,只是在其中稍作判断而已。 你可以根据从下面方法判断触发器是是处理了插入,删除还是
- 一个动态数组 a,如果你已经使用redim 语句给它设定了大小,那么在此之后使用 ubound(a) 就可以得到它的上边界。如果你没有使用