小程序-时间选择器(picker-view)
一、功能介绍:
基于picker-view组件实现嵌入页面的选择器,用来实现日期选择器和时间选择器,可以更便捷、简单的选择时间日期。
二、使用方法:
点击页面时间,弹出悬浮窗,悬浮窗内是时间选择器,选定时间日期后点击确定即可。
三、效果展示:
1、页面:
2、日期选择器:
3、时间选择器:
4、精确到分的选择器:
四、示例代码:
1、日期选择器:
WXML代码
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{
{showModal}}"></view>
<view class="modalDlg" wx:if="{
{showModal}}">
<view class="time_text">{
{year}}年{
{month}}月{
{day}}日</view>
<picker-view wx:if="{
{years.length>0 && months.length>0 && days.length>0}}" style="width: 100%; height: 500rpx;" indicator-style="height: 50px;" class="view_picker" value="{
{value}}" bindchange="bindChange">
<picker-view-column style='margin-left: 20rpx;'>
<view wx:for="{
{years}}" class="view_picker_text" wx:key="{
{index}}">{
{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{
{months}}" class="view_picker_text" wx:key="{
{index}}">{
{item}}月</view>
</picker-view-column>
<picker-view-column style='margin-right: 20rpx;'>
<view wx:for="{
{days}}" class="view_picker_text" wx:key="{
{index}}">{
{item}}日</view>
</picker-view-column>
</p