小程序中picker的使用|日期、时间、省市区联动都可以用它实现

知晓程序员,专注微信小程序开发的程序员!

今天来说一下小程序中picker组件的使用,官方说明如下:从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。

1、普通选择器

普通选择器更像是HTML中的select标签,主要实现单选功能,直接看官网示例就可以明白,很简单,以下是我写的demo~

WXML:

<view class="section">
  <view class="section__title">普通选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      您最喜欢的颜色:{{array[index]}}
    </view>
  </picker>
</view>

JS

Page({
  data: {
    array: ["红色", "蓝色", "绿色", "黑色", "白色", "紫色", "黄色", "橙色"],
    index: 0,
  },
  onLoad: function (options) {
  
  },
  bindPickerChange: function(e){
    console.log(e);
    this.setData({
      index: e.detail.value
    })
  }
})

二、时间选择器

选择开始时间和结束时间都可以用,此选择器接收字符串格式为"hh:mm"的时间,最小只能选择到分钟~

WXML:

<picker mode="time" value="{{startTime}}" bindchange="changeStartTime">
  <view class="checkin-info-item">
    <view class="label">开始时间</view>
    <view class="checkin-info-row">
      <view>{{startTime}}</view>
    </view>
  </view>
</picker>
<picker mode="time" value="{{endTime}}" bindchange="changeEndTime">
  <view class="checkin-info-item">
    <view class="label">结束时间</view>
    <view class="checkin-info-row">
      <view>{{endTime}}</view>
    </view>
  </view>
</picker>

属性值start表示有效时间范围的开始,end表示有效时间范围的结束

JS:

Page({
  data: {
    startTime: '00:00',
    endTime: '23:59',
  },
  onLoad: function (options) {
  
  }
})

3、日期选择器

日期选择器也是比较常用的,可以设置最小时间/最大时间,超出这个时间段是无法选择的~

WXML:

<picker mode="date" value="{{startDate}}" start="{{minDate}}" end="{{endDate}}" bindchange="changeStartDate">
  <view class="checkin-info-item first">
    <view class="label">开始日期</view>
    <view class="checkin-info-row">
      <view>{{startDate}}</view>
    </view>
  </view>
</picker>

<picker mode="date" value="{{endDate}}" start="{{startDate}}" end="{{maxDate}}" bindchange="changeEndDate">
  <view class="checkin-info-item">
    <view class="label">结束日期(持续{{dateDifference+1}}天)</view>
    <view class="checkin-info-row">
      <view>{{endDate}}</view>
    </view>
  </view>
</picker>

JS:

var util = require('../../utils/util.js');
Page({
  data: {
    startDate: '2017-01-01',
    endDate: '2020-01-01',
    dateDifference: 0,
  },
  onLoad: function (options) {
    var self = this;
    this.setData({
      dateDifference: util.dateDifference(self.data.startDate, self.data.endDate),
    })
  }
})

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2017-11-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

【Web动画】SVG 线条动画入门

1192
来自专栏偏前端工程师的驿站

CSS魔法堂:你真的懂text-align吗?

前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗?...

1817
来自专栏HTML5学堂

CSS3的loading制作,让页面加载时不再单调

页面的loading效果一直都是个比较重要的制作,往往一个好的加载效果可以有效的提升用户体验。而实际开发中,loading效果具体该如何制作?前端工程师又会有哪...

3339
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线

1183
来自专栏Coco的专栏

你所不知道的 CSS 动画技巧与细节

1113
来自专栏钱塘大数据

【干货】如何提升Excel表格的颜值?

下载了几个歪果仁做的Excel表格,非常的漂亮: ? ? 再看看我们最常见的表格,难看的瞬间爆表 ? 兰色对歪果仁的表格好看的原因进行了归纳,下面我们按歪果仁...

3569
来自专栏HTML5学堂

CSS3圆角边框“完全解读”

HTML5学堂小编:圆形,一个很奇妙的形状,在各种地方都可以看得到,特别是现在各类网站,都会有各种的圆形。圆角的制作曾经困扰了开发者很久,以至于以前开发者只能使...

3185
来自专栏HenCoder

HenCoder Android 开发进阶:自定义 View 1-3 文字的绘制

之前的内容在这里: HenCoder Android 开发进阶 自定义 View 1-1 绘制基础 HenCoder Android 开发进阶 自定义 View...

522
来自专栏Coco的专栏

不可思议的纯CSS导航栏下划线跟随效果

1163
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(七)-- 消失的边界线问题

653

扫描关注云+社区