微信小程序 picker-view 组件详解及简单实例


Posted in Javascript onJanuary 10, 2017

picker-view

相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图:

微信小程序 picker-view 组件详解及简单实例

嵌入页面的滚动选择器

属性名 类型 默认值 说明
value Number Array   数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。
indicator-style String   设置选择器中间选中框的样式
bindchange EventHandle   当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)

注意:其中只可放置<picker-view-column/>组件,其他节点不会显示。

picker-view-column

仅可放置于<picker-view />中,其孩子节点的高度会自动设置成与picker-view的选中框的高度一致

示例代码:

<view>
 <view>{{year}}年{{month}}月{{day}}日</view>
 <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
 <picker-view-column>
 <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
 </picker-view-column>
 <picker-view-column>
 <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
 </picker-view-column>
 <picker-view-column>
 <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
 </picker-view-column>
 </picker-view>
</view>
const date = new Date()
const years = []
const months = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
 years.push(i)
}

for (let i = 1 ; i <= 12; i++) {
 months.push(i)
}

for (let i = 1 ; i <= 31; i++) {
 days.push(i)
}

Page({
 data: {
 years: years,
 year: date.getFullYear(),
 months: months,
 month: 2,
 days: days,
 day: 2,
 year: date.getFullYear(),
 value: [9999, 1, 1],
 },
 bindChange: function(e) {
 const val = e.detail.value
 this.setData({
 year: this.data.years[val[0]],
 month: this.data.months[val[1]],
 day: this.data.days[val[1]]
 })
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
JavaScript中的集合及效率
Jan 08 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 #Javascript
微信小程序 label 组件详解及简单实例
Jan 10 #Javascript
实现一个简单的vue无限加载指令方法
Jan 10 #Javascript
微信小程序 input输入框详解及简单实例
Jan 10 #Javascript
微信小程序 form组件详解及简单实例
Jan 10 #Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 #Javascript
使用vue.js实现联动效果的示例代码
Jan 10 #Javascript
You might like
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
destoon常用的安全设置概述
2014/06/21 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
Javascript注入技巧
2007/06/22 Javascript
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Python开发的实用计算器完整实例
2017/05/10 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Python @property装饰器原理解析
2020/01/22 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
python程序输出无内容的解决方式
2020/04/09 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
python实现视频压缩功能
2020/12/18 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
个人自荐书范文
2015/03/09 职场文书
拖欠货款起诉状
2015/05/20 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server