微信小程序 选择器(时间,日期,地区)实例详解


Posted in Javascript onNovember 16, 2016

微信小程序 选择器(时间,日期,地区)

         微信小程序 开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正。

用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器.

上gif:

微信小程序 选择器(时间,日期,地区)实例详解

上代码:

1.index.js

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  date: '2016-11-08', 
  time: '12:00', 
  array: ['中国', '巴西', '日本', '美国'], 
  index: 0, 
 }, 
 
 onLoad: function () { 
 
 }, 
 // 点击时间组件确定事件 
 bindTimeChange: function (e) { 
  this.setData({ 
   time: e.detail.value 
  }) 
 }, 
 // 点击日期组件确定事件 
 bindDateChange: function (e) { 
  this.setData({ 
   date: e.detail.value 
  }) 
 }, 
 // 点击国家组件确定事件 
 bindPickerChange: function (e) { 
  this.setData({ 
   index: e.detail.value 
  }) 
 } 
}) 

2.index.wxml
[html] view plain copy
<!--index.wxml--> 
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx"> 
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> 
  <view class="picker"> 
   国家:{{array[index]}} 
  </view> 
 </picker> 
</view> 
 
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx"> 
 <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> 
  <view class="picker"> 
   时间 : {{time}} 
  </view> 
 </picker> 
</view> 
<view class="section" style="background:#787878;margin:20rpx;padding:20rpx"> 
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> 
  <view class="picker"> 
   日期: {{date}} 
  </view> 
 </picker> 
</view>

①普通选择器

选择器用mode来区别,默认是普通选择器,e.detail.value拿到的值是选择了项的索引index,再通过array拿到值.在data里面做初始化的时候,将备选项加入array即可.

选择时触发bindPickerChange事件,获取index.

②时间选择器

mode = time时,是时间选择器.start,end分别是有效时间范围的开始和结束.格式hh:mm
选择时触发bindTimeChange事件,获取time.

③日期选择器

mode = date时,是时间选择器.start,end分别是有效日期范围的开始和结束.格式yyyy-MM-dd
选择时触发bindDateChange事件,获取date

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript的对话框详解与参数
Mar 08 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
详解TypeScript中的类型保护
Apr 29 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 #Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 #Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 #Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 #Javascript
JavaScript仿微博发布信息案例
Nov 16 #Javascript
使用Node.js给图片加水印的方法
Nov 15 #Javascript
Node.js批量给图片加水印的方法
Nov 15 #Javascript
You might like
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Keras搭建自编码器操作
2020/07/03 Python
携程英文网站:Trip.com
2017/02/07 全球购物
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
技校生自我鉴定
2013/12/08 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
三问三解心得体会
2014/09/05 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
世界文化遗产导游词
2015/02/13 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
python中if和elif的区别介绍
2021/11/07 Python
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis