微信小程序日期选择器有星期天(微信小程序 滚动选择器时间日期详解及实例代码)
类别:数据库 浏览量:498
时间:2022-01-21 00:07:42 微信小程序日期选择器有星期天
微信小程序 滚动选择器时间日期详解及实例代码微信小程序 滚动选择器(时间日期)详解
微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图:
一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦….
这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。
看下相应的属性:
具体的来看看代码,布局:
<view class="section" > <picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode = "selector"> <view class="picker"> 国家:{{objectArray[index]}} </view> </picker> </view> <view class="section"> <picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange"> <view class="picker"> 时间 : {{times}} </view> </picker> </view> <view class="section"> <picker mode="date" value="{{date}}" start="1978-01-01" end="2017-1-23" bindchange="bindDateChange"> <view class="picker"> 日期: {{dates}} </view> </picker> </view>
css样式:
.section{ background:#CABBC7; margin:20rpx; padding:20rpx }
js代码:
Page({ data: { dates: '2016-11-08', times: '12:00', objectArray: ['中国', '英国', '美国'], index: 0, }, // 点击时间组件确定事件 bindTimeChange: function (e) { console.log("谁哦按") this.setData({ times: e.detail.value }) }, // 点击日期组件确定事件 bindDateChange: function (e) { console.log(e.detail.value) this.setData({ dates: e.detail.value }) }, // 点击城市组件确定事件 bindPickerChange: function (e) { console.log(e.detail.value) this.setData({ index: e.detail.value }) }
代码很简单,分别绑定事件,点击切换就Ok。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
您可能感兴趣
- 微信小程序可以用h5开发不(微信小程序webView嵌入H5的方法实例)
- 微信小程序存token(小程序开发实现access_token统一管理)
- 微信小程序静态页面详情(微信小程序基础教程之echart的使用)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 微信小程序计数器代码(微信小程序实现计算器案例)
- 微信小程序如何请求服务器数据(微信小程序学习笔记之页面配置与路由方式)
- 微信小程序开发如何实现自动保存(微信小程序开发实用技巧之数据传递和存储)
- 微信小程序开发模式(微信小程序引入Vant框架的全过程记录)
- 微信小程序开发完整操作流程(微信小程序开发之组件设计规范)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 微信小程序做计算器(微信小程序实现计算器小功能)
- 微信小程序左右翻页效果(微信小程序实现九宫格效果)
- 微信小程序接口返回数据怎么弄(微信小程序页面返回传值的4种解决方案汇总)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- 乾隆为何这么喜爱白塔原因是什么(乾隆为何这么喜爱白塔原因是什么)
- 逐渐消失的东北八大怪现象,进步的社会里我们遗失的是什么(逐渐消失的东北八大怪现象)
- 今日大雪,大雪养生这样做,一年都有好气色(大雪养生这样做)
- 粗盐是什么 粗盐的功效与作用(粗盐的功效与作用)
- 会 吃人 的客机 从天堂到地狱只需5分钟,图-104如何做到(会吃人的客机)
- 男人犯的错,为什么要女人来承担(为什么要女人来承担)