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

相关文章

来自专栏糊一笑

移动端效果之CellSwiper

写在前面 接着之前的移动端效果讲解,刚好项目中需要使用到这一效果,去饿了么的组件库看了一下效果,发现效果和微信端的cellSwiper还是有点差别的,由于项目中...

1996
来自专栏HTML5学堂

SVG - 创建SVG图片

SVG - 创建SVG图片 HTML5学堂:之前在绘图中使用到了SVG以及Canvas,因此决定最近将绘图类的知识和大家分享一下。从研究角度来说,SVG比Can...

4008
来自专栏达摩兵的技术空间

移动web端常见bug汇总001

本文是摘录整理了移动端常见的一些bug以及解决方案,第一篇,后面还会有持续的文章更新整理。

864
来自专栏积累沉淀

js监控输入密码检测大写键盘是否锁定

? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="...

1885
来自专栏前端知识分享

第122天:移动端开发常见事件和流式布局

可以看到,在京东各个模块的主容器中,都设置了最大最小宽度和宽度100%,而在导航区块中,由于一行有5个小区块,所以设置了宽度为20%,使得小区块也能达到自适应的...

1054
来自专栏互联网杂技

移动端开发的一些技巧

开篇语 最近接手了一个移动端的项目。个人感觉是自己做得比较快而且比较健壮的一个。。。移动端最主要就是页面要适用不同的手机屏幕,ipad等。下面就分享一些技巧,让...

27110
来自专栏大数据钻研

使用CSS完成元素居中的七种方法

在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的,但是复杂的布局往往使一些解决方案不能很好的发挥作用。 在网页布局中元素水平居中...

2494
来自专栏web前端

01移动端基本环境和常见问题

一、chrome模拟器(只是模拟尺寸,最终还是需要真机测试)      1、F12手机模拟(emulation)      2、选择或者添加模拟设备 二、本地服...

2049
来自专栏令仔很忙

新手学JavaScript(四)----CheckBox全选与全不选

在这给大家推荐一款比较不错的纯CSS实现的CheckBox–CSSCheckBox,用bootstrap里面自带的checkbox和radio样式不太美观,所...

2291
来自专栏林焕彬的专栏

iPhone X 适配手Q H5 页面通用解决方案

对于手Q 中的各业务来说,受 Phone X 影响的 H5 页面挺多,应该采取什么快速有效的办法来应对呢?

5.8K6

扫码关注云+社区