用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

功能完善的小程序日歷組件

Rolan 2020-4-1 00:21

小程序日歷組件 日歷組件,表單組件絕逼是前端開發的一個噩夢,尤其要做好一個旅游項目的日歷,變態需求特別多,要在小程序中實現攜程app的日歷,還要兼顧性能問題。 自定義橫向/縱向日歷 自定義區間大小 自定義日 ...

小程序日歷組件

日歷組件,表單組件絕逼是前端開發的一個噩夢,尤其要做好一個旅游項目的日歷,變態需求特別多,要在小程序中實現攜程app的日歷,還要兼顧性能問題。

  • 自定義橫向/縱向日歷
  • 自定義區間大小
  • 自定義日期內容
  • 指定節假日
  • 支持跨月顯示

難點

  • 懶加載保證渲染性能
  • 通過配置實現縱向日歷和橫向日歷
  • 陽歷節日與農歷節日與節氣
  • 交互,尤其是區域選擇的交互

示例代碼

https://github.com/webkixi/aotoo-xquery 
=> pages/calendar    
復制代碼

配置說明

wxml

<ui-calendar dataSource="{{config}}" />
復制代碼

js

基本用法

const Pager = require('../../components/aotoo/core/index')
Pager({
  data: {
    config: {
      $$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);
        }
      }
    }
  }
})
復制代碼

$$id
{String} 配置實例的Id

mode {Number} 設置日歷的展示模式,1=縱向日歷 2=橫向日歷

type {Number} single=單選日歷, range=選擇區間, multiple=多選日歷

total
{Number} 設置日歷從今天開始起需要跨多少天,如 180天,或者365天

start {String} 設置起始日期,如:'2020-06-05'

date
{Object|Function} 定義附加日期內容

disable
{Boolean} 設置全局無效,所有日期均不能交互,權重低于單個日期設置的disable

rangeCount
{Number} 當type === 'range'時,rangeCount為區間大小,意味著區間允許選擇多少天

rangeMode
{Number} 當正在做日期區間選擇時,是否允許顯示angeCount之外的日期 1=顯示, 2=不顯示

tap {String} 響應日期元素的tap事件

value
{Array} 默認選中的日期,允許數組為空,如果type='single'則應該設置如['2020-06-05'],type='range'應該設置如['2020-06-03', '2020-06-05'], type='multiple'時,數組允許多值

data
{Array} 該數據會自動計算日期跨度數量(允許跨年設置),如果設置了該數據,則total無效,如設置為['2019-11-05', '2021-11-05'],自動計算日期為730天

festival
{Boolean|Array} 設置日歷假期顯示,支持顯示指定假期

toolbox
{Object} 日歷的擴展配置,允許設置一些高級功能,如日歷是否允許跨月,特殊的range算法等等

toolbox.header
{Boolean} 是否顯示日歷的頭部,一般用于橫向日歷時為true

toolbox.monthHeader
{Boolean} 是否顯示日歷的月頭部,一般在縱向日歷時為true

toolbox.rangeEdge
{Function} 默認值null,type='range'時,自定義range選擇算法

toolbox.discontinue
{Boolean} 默認false,當日歷有data數組構建時,缺少數據的月份會被忽略

如何設置

設置橫向、縱向日歷

let calenderConfig = {
  $$id: 'calendar',
  mode: 2, // 1,縱向日歷 2,橫向日歷
  type: 'single', // single:單選  range: 區間選擇  multiple:多選
  tap: 'onTap', // 回調事件
  total: 180, // 所有日期選擇天數
  methods: { // 響應方法
    onTap(e, param, inst) {
      console.log(param);
    }
  }
}
復制代碼

設置區間選擇日歷

該示例配置為仿攜程的功能設置

let calendarConfig = {
  $$id: 'calendar',  //實例id
  mode: 1,  // 縱向日歷
  type: 'range',  // 區間選擇日歷
  tap: 'onTap', // tap響應方法
  total: 365,  // 指定日歷從今天開始總天數
  rangeCount: 28, // 區間范圍
  rangeMode: 1, // 區間選擇是否隱藏非區間的月份
  festival: true, // 是否顯示節假日
  value: ['2020-04-03', '2020-04-09'],  // 默認值
  methods: { 
    // 定義響應方法  
    onTap(e, param, inst) {
      
      if (param.range === 'start') {  // 第一次點擊時
        inst.update({dot: [{title: '入住'}]})
      }
      if (param.range === 'end') { // 第二次點擊時
        inst.update({dot: [{title: '離店'}]})
      }
      console.log(param);
    }
  }
}
復制代碼

設置多選日歷

支持選中多個日期

let calenderConfig = {
  $$id: 'calendar',
  mode: 2,
  type: 'multiple', // single:單選  range: 區間選擇  multiple:多選
  tap: 'onTap', // 回調事件
  total: 180, // 所有日期選擇天數
  value: ['2020-04-03', '2020-04-09', '2020-04-10'],
  methods: { // 響應方法
    onTap(e, param, inst) {
      console.log(param);
    }
  }
}
復制代碼

據已知日期自動構建

此例中total無效,由兩個給定的日期構建了三個月的日歷

let calenderConfig = {
  $$id: 'calendar',
  mode: 2, // 1,縱向日歷 2,橫向日歷
  type: 'single', // single:單選  range: 區間選擇  multiple:多選
  tap: 'onTap', // 回調事件
  total: 180, // 所有日期選擇天數,此例中無效  
  data: [{"date":"2020-04-03"}, {"date":"2020-06-03"}],
  methods: { // 響應方法
    onTap(e, param, inst) {
      console.log(param);
    }
  }
},
復制代碼

根據已知日期自動構建,忽略無數據月份

此例中total無效, 由兩個給定的日期構建了三個月的日歷

let calenderConfig = {
  $$id: 'calendar',
  mode: 2, // 1,縱向日歷 2,橫向日歷
  type: 'single', // single:單選  range: 區間選擇  multiple:多選
  tap: 'onTap', // 回調事件
  total: 180, // 所有日期選擇天數,此例中無效
  data: [{"date":"2020-04-03"}, {"date":"2020-06-03"}],
  toolbox: {
    discontinue: true // 允許構建跨月日歷
  },
  methods: { // 響應方法
    onTap(e, param, inst) {
      console.log(param);
    }
  }
},
復制代碼

構建節假日日歷

允許指定節假日,指定節假日內容

  • festival: true 顯示所有組件自帶節日

  • festival: ['元旦節', '情人節', '勞動節', '冬至']
    顯示指定假日

  • festival: [{title: '春節', content: {dot: ['新年好']}}]
    顯示指定節日,并附加內容

let calenderConfig = {
  $$id: 'calendar',
  mode: 1, // 1,縱向日歷 2,橫向日歷
  type: 'single', // single:單選  range: 區間選擇  multiple:多選
  tap: 'onTap', // 回調事件
  data: [{"date":"2020-09-03"}, {"date":"2020-12-28"}],
  festival: ['教師節', '圣誕節'],
  toolbox: {
    discontinue: true // 允許忽略無數據月份
  },
  methods: { // 響應方法
    onTap(e, param, inst) {
      console.log(param);
    }
  }
},
復制代碼

自定義日期內容

自定義日期內容有兩種方法

  • 在data數據配置中加入'dot'數組屬性
    config.data = [{date: '2020-03-03', content: {dot: ['內容']}}]

  • 在date屬性中配置

// 配置所有日期的附加內容   
config.date = {dot: ['自定義內容']}  

// 指定日期內容配置   
config.date = function(param){
  // 通過param的屬性寫邏輯 param.date, param.year, param.month, param.day ...
  if (param.date === '2020-8-13') {
    param.dot = ['附加內容']
    return param
  }
}
復制代碼

設置示例

let calenderConfig = {
  $$id: 'calendar',
  mode: 2, // 1,縱向日歷 2,橫向日歷
  type: 'single', // single:單選  range: 區間選擇  multiple:多選
  tap: 'onTap', // 回調事件
  date: function(param){
    if (param.month === 12 && param.day === 26) {
      param.dot = ['毛主席誕辰']
      return param
    }
    if (param.month === 9 && param.day === 10) {
      param.dot = [
        {title: '生日', itemStyle: 'font-size: 11px; color: blue;'},
        {title: '騙你的', itemStyle: 'font-size: 11px; color: #666'},
      ]
      return param
    }
    if (param.month === 9 && param.day === 20) {
      param.dot = [
        {title: '無效日期', itemStyle: 'font-size: 12px; color: red;'},
        {title: '不能交互', itemStyle: 'font-size: 12px; color: #666;'},
      ]
      param.disable = true
      return param
    }
  },
  toolbox: {
    discontinue: true
  },
  data: [{"date":"2020-09-03"}, {"date":"2020-12-28"}],
  methods: { // 響應方法
    onTap(e, param, inst) {
      console.log(param);
    }
  }
},
復制代碼

GITHUB源碼

示例小程序

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 天天修改 來自: 掘金
河北20选5大星走势图