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


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 相关文章推荐
jquery得到iframe src属性值的方法
Sep 25 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
详解vue 实例方法和数据
Oct 23 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
layui表格内容溢出的解决方法
Sep 06 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
Python标准库之Sys模块使用详解
2015/05/23 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python中正则表达式与模式匹配
2019/05/07 Python
使用python接入微信聊天机器人
2020/03/31 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
为什么是 Python -m
2020/06/19 Python
python GUI模拟实现计算器
2020/06/22 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
学术会议主持词
2014/03/17 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
中学生检讨书范文
2014/11/03 职场文书
事业单位聘任报告
2015/03/02 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
提档介绍信范文
2015/10/22 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
Python借助with语句实现代码段只执行有限次
2022/03/23 Python