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

2023-10-29 20:51:04

仿携程酒店日历

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

完整源码

github地址
或者 github搜索 aotoo-xquery
微信搜索小程序: xquery

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

一年有效期
日历纵向滚动，方便用户快速翻页
入住，离店时间间隔不大于28天，其余日期置灰
超出区间的月份隐藏，避免性能损耗
指定节假日
入住、离店高亮，并标注说明，区间日期低亮
选定离店日期后，跳转前页
再次进入，如果有值，应该高亮表示

难点

懒加载保证渲染性能
通过配置实现纵向日历和横向日历
阳历节日与农历节日与节气
交互，尤其是区域选择的交互

日历组件配置

第一步

安装xquery和他的插件

第二步

wxml模板

<ui-calendar dataSource="{{config}}" />

第三步

配置日历组件

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);
        }
      }
    }
  }
})

github地址：https://github.com/webkixi/aotoo-xquery

小程序demo演示