仿攜程酒店日歷組件for小程序

仿攜程酒店日歷

接受日歷組件開發之前，本來是拒絕的，日歷組件，表單組件絕逼是前端開發的一個噩夢，尤其要做好一個旅游項目的日歷，產品的收貨標准只有一條，你看攜程都實現了哦, 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演示