小程序自定义日历组件，支持多种形态

小程序自定义日历组件

日历组件，表单组件绝逼是前端开发的一个噩梦，尤其要做好一个旅游项目的日历，变态需求特别多，要在小程序中实现携程app的日历，还要兼顾性能问题。

• 4种日历模式(横版，纵版，tab版)
• 3种选择方式(单选，多选，区选)
• 支持自定义节假日
• 支持自定义日期内容
• 再次进入，如果有值，应该高亮表示
• 支持数据回填
• 懒加载保证渲染性能

日历组件配置

第一步

安装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地址：github.com/webkixi/aot…

小程序demo演示