小程序中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),
})
}
})
- 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编程获取图片数据的方法详解
- Android垂直滚动控件ScrollView使用方法详解
- Android开发之自定义view实现通讯录列表A~Z字母提示效果【附demo源码下载】
- Android ExpandableRecyclerView使用方法详解
- Android开发之SD卡文件操作分析
- Android学习之Broadcast的简单使用
- Android 仿微信自定义数字键盘的实现代码
- RN在Android打包发布App(详解)
- Android开发之使用SQLite存储数据的方法分析
- Android进度条控件progressbar使用方法详解
- Android自定义view利用Xfermode实现动态文字加载动画
- Android自定义控件实现下拉刷新效果
- Android实现文件解压带进度条功能
- Android使用ViewPager实现图片滑动预览效果
- Android 布局中的android:onClick的使用方法总结