评论

仿携程酒店日历组件

要做好一个旅游项目的日历,产品的收货标准只有一条,`你看携程都实现了哦`, MMP的。要在小程序中实现携程app的日历,即要兼顾性能问题,还要实现很多产品非常非常合理的需求。

仿携程酒店日历

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

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

  • 一年有效期
  • 日历纵向滚动,方便用户快速翻页
  • 入住,离店时间间隔不大于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演示

最后一次编辑于  2019-12-25  
点赞 4
收藏
评论

2 个评论

  • 龙风
    龙风
    2019-12-24

    非常好,已经收藏工具小程序,赞

    2019-12-24
    赞同
    回复
  • 英忠通信
    英忠通信
    2019-12-24

    好项目出好技术,赞

    2019-12-24
    赞同
    回复
登录 后发表内容