微信小程序 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 相关文章推荐
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
tsconfig.json配置详解
May 17 Javascript
react 生命周期实例分析
May 18 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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中的phpinfo()函数
2013/06/06 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
PHP微商城开源代码实例
2019/03/27 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
javascript 全角转换实现代码
2009/07/17 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
Python列表的切片实例讲解
2019/08/20 Python
如何使用python代码操作git代码
2020/02/29 Python
Python装饰器用法与知识点小结
2020/03/09 Python
python 弧度与角度互转实例
2020/04/15 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
python利用opencv实现颜色检测
2021/02/23 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
爱护花草树木的标语
2014/06/11 职场文书
教师求职信
2014/06/17 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
MySQL分区路径子分区再分区
2022/04/13 MySQL