当前位置:  开发笔记 > 小程序 > 正文

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

这篇文章主要介绍了微信小程序picker-view组件详解及简单实例的相关资料,需要的朋友可以参考下

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的选中框的高度一致

示例代码:


 {{year}}年{{month}}月{{day}}日
 
 
 {{item}}年
 
 
 {{item}}月
 
 
 {{item}}日
 
 
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]]
 })
 }
})

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

推荐阅读
李桂平2402851397
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有