小程序中picker的使用|日期、时间、省市区联动都可以用它实现
时间:2022-05-03
本文章向大家介绍小程序中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),
})
}
})
- Ubuntu 16.04下为TITAN 1080 显卡安装驱动及Gpu版TensorFlow|深度学习
- 给新生成的节点(动态生成节点)绑定事件方法总结
- JavaWeb(四)JDBC操作Oracle
- JavaWeb(六)Listener监听器
- JSP引入 - UEditor 富文本编辑器
- JavaWeb(五)Filter过滤器
- JavaWeb(七)Cookie,EL表达式,标准标签库
- JavaWeb(八)JQuery
- 程序员如何提一个好问题
- JavaWeb(九)AJAX
- 国内外免费地图SDK都在这了,开发APP再也不怕找不到路了
- Hibernate框架HQL语句
- Hibternate框架笔记
- Python做机器学习的生态系统简介
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android中调用另一个Activity并返回结果(选择头像功能为例)
- Android 自定义缩短Toast显示时间的实例代码
- Android Presentation实现双屏异显
- Android中点击按钮启动另一个Activity及Activity之间传值问题
- Android中使用SeekBar拖动条实现改变图片透明度(代码实现)
- Android实现原生锁屏页面音乐控制
- android实现简单音乐播放器
- Android倒计时功能的实现代码
- android studio 使用Mocklocation虚拟定位
- Android自定义gridView仿头条频道拖动管理功能
- Android实现选项菜单子菜单
- Android scrollview如何监听滑动状态
- android 自定义圆角button效果的实例代码(自定义view Demo)
- Android开发简易音乐播放器
- Android 自定义ListView实现QQ空间界面(说说内包含图片、视频、点赞、评论、转发功能)