移動端『H5周曆元件』

sunzunlu發表於2018-04-22
H5元件

文件維護者：孫尊路 轉載註明出處。

喜歡的話，記得star 或關注一下噢！

適用場景

  • 前些陣子，寫了一篇《日曆元件實現》的使用線上文件，遇到一個需求：實現一個H5周曆來填寫每週的工作日誌，去網上查閱資料，發現很多示例也沒有一個標準的使用文件，感覺用起來也吃力，於是就自己造了一個周曆元件，文章下面有很詳細的使用說明。 本篇結合了實際的專案應用需求整理出來的，該文件後面會持續優化更新。若有不足，也請大家多多指教，小編會及時更正！

例項展示

移動端『H5周曆元件』

典型專案應用案例

  • 【移動OA類】 我的日誌

依賴資源

  • libs/calendar_base_week.js 周曆元件基類js庫，可以根據業務需求，任意個性化，從而達到設計視覺效果

配置和使用方法

DOM結構

一個div即可

<div id="weekcalendar"></div>
複製程式碼

初始化

以下程式碼是最簡單的用法，更多複雜用法請參考calendarweek_showcase原始碼下載

var weekcalendar = new CalendarWeek({
    // 預設周曆元件容器
    "container": "#weekcalendar",
    // 點選日期事件
    "onItemClick": function(item) {
        console.log(item.date + " " + item.week);
    },
    isDebug: false
});
複製程式碼

引數說明

引數 引數型別 說明
container string或HTMLElement 必選 Calendar容器的css選擇器，例如“#calendar”。預設為#calendar
pre string或HTMLElement 可選 前一週按鈕的css選擇器或HTML元素。預設.pre
next string或HTMLElement 可選後一週按鈕的css選擇器或HTML元素。預設.next
dataRequest Function 可選 回撥函式，繫結業務資料。例如：某天有日程，則會在對應日期上標識出一個小紅點或者其他標識，預設傳入資料格式：data=[{"date":"2018-04-18"},{"date":"2018-04-17"},{"date":"2018-04-16"}]
onItemClick Function 必選 回撥函式，當你點選或輕觸某日期 300ms後執行。回撥日期結果：2018-04-07
template Function或String 可選，元素渲染的模板，可以是一個模板字串，也可以是一個函式，為函式時，確保返回模板字串，預設元件內建模板
isDebug Boolean 可選是否開啟除錯模式，預設false

API

生成的weekcalendar物件可以呼叫如下API

var weekcalendar = new CalendarWeek(...);
複製程式碼

refresh()

外部重新整理方法，重洗渲染當前周的列表資料。

weekcalendar.refresh();
複製程式碼

slidePrev()

切換為上一週，與元件內部傳入引數pre作用一樣，該API支援Promise非同步成功回撥裡處理自己的業務邏輯。

weekcalendar.slidePrev().then(...).then(...);
複製程式碼

slideNext()

切換為下一週，與元件內部傳入引數next作用一樣，該API支援Promise非同步成功回撥裡處理自己的業務邏輯。

weekcalendar.slideNext().then(...).then(...);
複製程式碼

優點和好處

能夠極大方便實際專案上開發人員的上手使用，而且版本是不斷根據實際專案上的需求進行優化升級的，開放原始碼可以讓特殊需求的專案開發人員進行修改、補充和完善。

存在的不足之處

目前依賴js庫有多個（mustache.min.js、mui.min.js）主要是一些常用的移動端js庫（無可厚非），包含元件的核心庫，或許有人認為影響載入速度之類的，其實已經有很多專案在應用效果還可以，當然了小編也正在努力剝離第三方js庫,思路已經有了，只不過需要一點時間進行程式碼重構，若在此之前給你帶來的不便，還請多多包涵，畢竟優化元件確實需要花費大量時間的。

相關文章