android 携程日历控件,仿携程酒店日历组件for小程序

仿携程酒店日历

接受日历组件开发之前，本来是拒绝的，日历组件，表单组件绝逼是前端开发的一个噩梦，尤其要做好一个旅游项目的日历，产品的收货标准只有一条，你看携程都实现了哦, MMP的。要在小程序中实现携程app的日历，即要兼顾性能问题，还要实现很多产品非常非常合理的需求。

完整源码

github地址

或者 github搜索 aotoo-xquery

微信搜索小程序: xquery

携程的酒店系统需要日历组件确定入住时间，离店时间。需要日历组件满足以下条件

一年有效期

日历纵向滚动，方便用户快速翻页

入住，离店时间间隔不大于28天，其余日期置灰

超出区间的月份隐藏，避免性能损耗

指定节假日

入住、离店高亮，并标注说明，区间日期低亮

选定离店日期后，跳转前页

再次进入，如果有值，应该高亮表示

难点

懒加载保证渲染性能

通过配置实现纵向日历和横向日历

阳历节日与农历节日与节气

交互，尤其是区域选择的交互

日历组件配置

第一步

第二步

wxml模板

第三步

配置日历组件

Pager({

data: {

source: {

$$id: 'calendar',

mode: 1, // 纵向日历

type: 'range', // 区域选择

tap: 'onTap', // page响应事件

total: 365, // 定义从今天开始一年事件

rangeCount: 28, // 区选区间28天

festival: true, // 开启节假日显示

value: ['2019-12-24', '2020-01-05'], // 默认值

methods: {

// 响应 tap事件

onTap(e, param, inst) {

// 区间

if (param.range === 'start') {

inst.update({dot: [{title: '入住'}]})

}

if (param.range === 'end') {

inst.update({dot: [{title: '离店'}]})

setTimeout(() => {

Pager.alert('离店，跳回页面')

}, 1000);

}

console.log(param);

}

}

}

}

})

小程序demo演示

原文：https://www.cnblogs.com/xquery/p/12127911.html