微信小程序日历组件calendar详解及实例
微信小程序日历组件calendar详解及实例
模版使用:
src="../cal/calendar.wxml"> is="calendar" data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l unar_selected_value}}">
JS代码使用:
var Calendar = require('../cal/calendar'); Page({ data: { selected_value: [], days: [], month: [], years: [], lunar_years: [], lunar_month: [], lunar_days: [], selectDateType: 1, lunar_selected_value: [] }, .... // 指定选择器回调函数 new Calendar('key', this, function(date){ that.setData({ date: date }) });
样式
.calendar{ position: absolute; bottom: 0; width: 100%; z-index: 999; background-color: #fff; } .tab{ display:inline-block; width:50%; text-align:center; font-size:16px; color: #ccc; } .tab-bar{ background-color: #eee; height: 40px; line-height: 40px; } .tab-bar .active{ color: #000; } .selected-item{ font-size: 28px; } .event-type_parent{ font-size: 14px; } .event-type_child{ text-align: center; line-height: 30px; } .event-type_txt{ display: inline-block; }
以上用法看不懂的话,具体就参考代码里面index目录下。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
微信小程序之picker日期和时间选择器
下面来介绍小picker,分三种样式: 默认的自己可以定义数据的 mode="time"是时间选择器 mode="date"是日期选择器 跟其他的一样先来看下picker.wxml <view class="page"> <view class="page__hd"> <text class="page__title">picker</text> <te
-
微信小程序 选择器(时间,日期,地区)实例详解
微信小程序 选择器(时间,日期,地区) 微信小程序 开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正. 用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: 上代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', ti
-
微信小程序 滚动选择器(时间日期)详解及实例代码
微信小程序 滚动选择器(时间日期)详解 微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <
-
微信小程序日历组件calendar详解及实例
微信小程序日历组件calendar详解及实例 模版使用: src="../cal/calendar.wxml"> is="calendar" data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l unar_selected_value}}"> JS代码使用: var Calendar = require('
-
微信小程序 MD5的方法详解及实例代码
微信小程序 MD5的方法详解 生成的文件可以放在 utils文件中哦!!! /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also contributed by Greg Holt
-
微信小程序 常用工具类详解及实例
微信小程序 常用工具类详解 前言: 做微信小程序当中,会遇到好多的工具类util.js,这里记载下来以便平常使用 (Ps:建议通过目录查看) -获取日期(格式化) function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinut
-
微信小程序slider组件使用详解
本文为大家分享了微信小程序slider组件的使用方法,供大家参考,具体内容如下 效果图 WXML <view class="tui-content"> <view class="tui-slider-head">设置step,当前设置步伐为5,当前值:{{slider1}}</view> <view class="tui-slider-box"> <slider bindchange=&quo
-
微信小程序progress组件使用详解
本文为大家分享了微信小程序progress组件的使用方法,供大家参考,具体内容如下 效果图 WXML <view class="tui-content"> <view class="tui-menu-list"> <text>show-info在进度条右侧显示百分比</text> <progress percent="50" show-info /> </view> <
-
微信小程序radio组件使用详解
本文为大家分享了微信小程序radio组件的使用方法,供大家参考,具体内容如下 效果图 WXML <view class="tui-content"> <radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <view cla
-
微信小程序switch组件使用详解
本文实例为大家分享了微信小程序switch组件的实现代码,供大家参考,具体内容如下 效果图 HTML <div class="switch-list"> <span class="fui-fr">红色switch组件</span> <input class="fui-switch" style="color:rgb(255, 0, 0);" type="checkbox&qu
-
微信小程序checkbox组件使用详解
本文为大家分享了微信小程序checkbox组件的使用方法,供大家参考,具体内容如下 效果图 WXML <view class="tui-content"> <checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}"> <view class="tui-menu-
-
微信小程序button组件使用详解
本文为大家分享了微信小程序button组件的使用方法,供大家参考,具体内容如下 展示效果图 button组件的常用属性 size:default.mini--default为块级按钮.mini为小按钮 type:primary.default.warn--primary提交成功.default默认灰色.warn警告色 plain:true.false--按钮是否镂空,背景色透明 disabled:true.false--是否禁用 loading:true.false--名称前是否带 loadin
-
微信小程序icon组件使用详解
微信小程序icon组件的实现,具体如下 原生的icon组件的属性 WXML <view class="icon-group"> <icon wx:for="{{typeList}}" type="{{item}}" size="40"></icon> </view> JS Page({ data: { typeList: ['success', 'success_no_circl
随机推荐
- CSS选择符说明
- mysql中如何判断当前是字符 mysql判断字段中有无汉字
- vue开发调试神器vue-devtools使用详解
- 使用ADSI、ASP和一对魔术戏法自动地创立一个虚拟目录的方法
- 详解spring+springmvc+mybatis整合注解
- Oracle数据库的启动与关闭方法
- JS定时器实例详细分析
- ThinkPHP CURD方法之table方法详解
- 浅析Node.js实现HTTP文件下载
- Python实现对比不同字体中的同一字符的显示效果
- PHP中替换换行符的几种方法小结
- SQLServer2005创建定时作业任务
- 浏览器打开层自动缓慢展开收缩实例代码
- win2003负载均衡设置方法(比较详细)
- android横竖屏切换时候Activity的生命周期
- C#基础知识之new关键字介绍
- 解析使用C++编写无错代码的方法技巧
- spring boot 即时重新启动(热更替)使用说明
- 易语言简单的安装代码总结
- Python基于OpenCV实现人脸检测并保存