微信小程序 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 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
微信小程序实现锚点功能
Nov 20 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
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
php header函数的常用http头设置
2015/06/25 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
详解jquery uploadify 上传文件
2013/11/09 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
python求素数示例分享
2014/02/16 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
Python如何实现单例模式
2016/06/03 面试题
给领导的检讨书
2014/02/16 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
公司总经理岗位职责
2015/04/01 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python