小程序中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 条评论
登录 后参与评论

相关文章

来自专栏积累沉淀

JavaScript 事件对象

一.事件对象 事件处理三部分组成:对象.事件处理函数=函数。例如:单击文档任意处。 document.onclick = function () { alert...

17510
来自专栏企鹅号快讯

坚定地使用 CSS Custom Properties

好久没译文,最近看到这篇 Getting Hardboiled with CSS Custom Properties。觉得不错,翻译出来给大家。现在 CSS 新...

1847
来自专栏HTML5学堂

关于其他选择器以及选择器优先级详解

上周我们讲解了页面浮动之后产生的问题,以及针对这个问题所采取的措施——清浮动,同时罗列了好几种清浮动的方法。那本周我们再来继续上次给大家分享的如何找标签的问题,...

2778
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

1092
来自专栏不止是前端

Vue:Vue中操作DOM方法

4319
来自专栏个人随笔

初识jQuery 基础篇

首先提供一个知识点外资源: 在线编程:无需编程环境:   https://codepen.io/pen   添加jQuery库:     Settings-->...

3066
来自专栏行者常至

(19)Struts2_表单标签

351
来自专栏HTML5学堂

cssText的基本使用

HTML5学堂:利用JavaScript给标签设置动态的样式,用到了大家比较熟悉的style来给标签设置样式,今天要给大家介绍另外一个cssText,它不仅用起...

2957
来自专栏前端知识分享

第77天:jQuery事件绑定触发

返回值不同,.height()方法返回的是 数字类型(20),.css(“height”)返回的是字符串类型(20px),因此.height()方法常用在参与数...

1033
来自专栏前端儿

简单的鼠标可拖动DIV 兼容IE/FF

一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度,clientX/clientY位置等)

681

扫码关注云+社区