日历组件,表单组件绝逼是前端开发的一个噩梦,尤其要做好一个旅游项目的日历,变态需求特别多,要在小程序中实现携程应用的日历,还要兼顾性能问题。
<李>自定义横向/纵向日历李
<李>自定义区间大小李
<李>自定义日期内容李
<李>指定节假日李
<李>支持跨月显示李
<李>懒加载保证渲染性能李
<李>通过配置实现纵向日历和横向日历李
<李>阳历节日与农历节日与节气李
<李>交互,尤其是区域选择的交互李
https://github.com/webkixi/aotoo-xquery=比;页面/日历
wxml
& lt; ui-calendar数据源="{{配置}}"/祝辞
js
基本用法
const寻呼机=要求(“. ./. ./组件/aotoo/核心/指数”)
寻呼机({
数据:{
配置:{
$ $ id:“日历”,
模式:1、//纵向日历
类型:“范围”,//区域选择
水龙头:' onTap ',//页面响应事件
总:365//定义从今天开始一年事件//rangeCount: 28日,区选区间28天
节日:真的,//开启节假日显示
价值:“2019-12-24”,“2020-01-05”,//默认值
方法:{//响应利用事件>
让calenderConfig={
$ $ id:“日历”,
模式:2//1纵向日历2横向日历
类型:“单身”,//单:单选范围:区间选择多:多选
水龙头:' onTap ',//回调事件
总:180//所有日期选择天数
方法:{//响应方法>
让calendarConfig={
$ $ id:“日历”,//实例id
模式:1、//纵向日历
类型:“范围”,//区间选择日历
水龙头:' onTap ',//水龙头响应方法
总:365//指定日历从今天开始总天数//rangeCount: 28日,区间范围
rangeMode: 1、//区间选择是否隐藏非区间的月份
节日:真的,//是否显示节假日
价值:“2020-04-03”,“2020-04-09”,//默认值
方法:{//定义响应方法>
让calenderConfig={
$ $ id:“日历”,
模式:2//单类型:“多个”:单选范围:区间选择多:多选
水龙头:' onTap ',//回调事件
总:180//所有日期选择天数
价值:[“2020-04-03”,“2020-04-09”,“2020-04-10”),
方法:{//响应方法>
让calenderConfig={
$ $ id:“日历”,
模式:2//1纵向日历2横向日历
类型:“单身”,//单:单选范围:区间选择多:多选
水龙头:' onTap ',//回调事件
总:180//所有日期选择天数,此例中无效
数据:[{“日期”:“2020-04-03”},{“日期”:“2020-06-03”}),
方法:{//响应方法>
让calenderConfig={
$ $ id:“日历”,
模式:2//1纵向日历2横向日历
类型:“单身”,//单:单选范围:区间选择多:多选
水龙头:' onTap ',//回调事件
总:180//所有日期选择天数,此例中无效
数据:[{“日期”:“2020-04-03”},{“日期”:“2020-06-03”}),
工具箱:{
停止:真//允许构建跨月日历
},
方法:{//响应方法>
让calenderConfig={
$ $ id:“日历”,
模式:1//1纵向日历2横向日历
类型:“单身”,//单:单选范围:区间选择多:多选
水龙头:' onTap ',//回调事件
数据:[{“日期”:“2020-09-03”},{“日期”:“2020-12-28”}),
节日:['教师节”、“圣诞节”),
工具箱:{
停止:真//允许忽略无数据月份
},
方法:{//响应方法>
配置。data=https://www.yisu.com/zixun/[{日期:2020-03-03,内容:{点:[的内容的]}}]
在日期属性中配置
//配置所有日期的附加内容
配置。日期={点:['自定义内容的]}//指定日期内容配置
配置。日期=函数(参数){//通过参数的属性写逻辑参数。日期、参数。年,参数。月,参数。一天…
如果(参数。日期===' 2020-8-13 '){
参数。点=['附加内容”)
返回参数
}
}
设置示例
让calenderConfig={
$ $ id:“日历”,
模式:2//1纵向日历2横向日历
类型:“单身”,//单:单选范围:区间选择多:多选
水龙头:' onTap ',//回调事件
日期:函数(参数){
如果(参数。月===12,,参数。一天===26){
参数。点=['毛主席诞辰”)
返回参数
}
如果(参数。9月===,,参数。一天===10){
参数。点=[
{标题:“生日”,itemStyle:“字体大小:11 px;颜色:蓝色,“},
{标题:“骗你的”,itemStyle:“字体大小:11 px;颜色:# 666},
］
返回参数
}
如果(参数。9月===,,参数。一天===20){
参数。点=[
{标题:“无效日期”,itemStyle:“字体大小:12 px;颜色:红色,“},
{标题:“不能交互’,itemStyle:“字体大小:12 px;颜色:# 666;},
］
参数。禁用=true
返回参数
}
},
工具箱:{
停止:真
},
数据:[{“日期”:“2020-09-03”},{“日期”:“2020-12-28”}),
方法:{//响应方法
alt="功能完善的小程序日历组件的实现">
