微信小程序 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 相关文章推荐
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 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 allow_url_include的应用和解释
2010/04/22 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
php依赖注入知识点详解
2019/09/23 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
python 创建弹出式菜单的实现代码
2017/07/11 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
体育运动会广播稿
2014/10/05 职场文书
2015年中个人总结范文
2015/03/10 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
python 爬取吉首大学网站成绩单
2021/06/02 Python
Python中的datetime包与time包包和模块详情
2022/02/28 Python
python游戏开发Pygame框架
2022/04/22 Python
vue3不同环境下实现配置代理
2022/05/25 Vue.js