微信小程序picker

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

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

实现效果图：

嵌入页面的滚动选择器

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

注意：其中只可放置组件，其他节点不会显示。

picker-view-column

仅可放置于中，其孩子节点的高度会自动设置成与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>