文檔維護(hù)者：孫尊路
喜歡的話，記得star 一下噢！
適用場景
- 前些陣子咱筛，寫了一篇《日歷組件實(shí)現(xiàn)》的使用在線文檔，遇到一個(gè)需求：實(shí)現(xiàn)一個(gè)H5周歷來填寫每周的工作日志杆故，去網(wǎng)上查閱資料迅箩，發(fā)現(xiàn)很多示例也沒有一個(gè)標(biāo)準(zhǔn)的使用文檔，感覺用起來也吃力处铛，于是乎饲趋，自己造了一個(gè)
周歷組件，文章下面有很詳細(xì)的使用說明撤蟆。本篇結(jié)合了實(shí)際的項(xiàng)目應(yīng)用需求整理出來的奕塑，該文檔后面會(huì)持續(xù)優(yōu)化更新。若有不足家肯，也請(qǐng)大家多多指教龄砰，小編會(huì)及時(shí)更正！
實(shí)例展示
周歷示例演示，支持上一周换棚、下一周切換等效果
注：按F12可在瀏覽器預(yù)覽示例demo源代碼(H5)：點(diǎn)擊此處進(jìn)行下載
典型項(xiàng)目應(yīng)用案例
- 【移動(dòng)OA類】 我的日志
依賴資源
-
libs/calendar_base_week.js周歷組件基類js庫式镐，可以根據(jù)業(yè)務(wù)需求，任意個(gè)性化固蚤，從而達(dá)到設(shè)計(jì)視覺效果
配置和使用方法
DOM結(jié)構(gòu)
一個(gè)div即可
<div id="weekcalendar"></div>
初始化
以下代碼是最簡單的用法娘汞，更多復(fù)雜用法請(qǐng)參考calendarweek_showcase源碼下載
var weekcalendar = new CalendarWeek({
// 默認(rèn)周歷組件容器
"container": "#weekcalendar",
// 點(diǎn)擊日期事件
"onItemClick": function(item) {
console.log(item.date + " " + item.week);
},
isDebug: false
});
參數(shù)說明
| 參數(shù) | 參數(shù)類型 | 說明 |
|---|---|---|
| container | string或HTMLElement |
必選 Calendar容器的css選擇器，例如“#calendar”颇蜡。默認(rèn)為#calendar
|
| pre | string或HTMLElement |
可選 前一周按鈕的css選擇器或HTML元素价说。默認(rèn).pre
|
| next | string或HTMLElement |
可選后一周按鈕的css選擇器或HTML元素。默認(rèn).next
|
| dataRequest | Function |
可選 回調(diào)函數(shù)风秤，綁定業(yè)務(wù)數(shù)據(jù)鳖目。例如：某天有日程，則會(huì)在對(duì)應(yīng)日期上標(biāo)識(shí)出一個(gè)小紅點(diǎn)或者其他標(biāo)識(shí)缤弦，默認(rèn)傳入數(shù)據(jù)格式：data=[{"date":"2018-04-18"},{"date":"2018-04-17"},{"date":"2018-04-16"}]
|
| onItemClick | Function |
必選 回調(diào)函數(shù)领迈，當(dāng)你點(diǎn)擊或輕觸某日期 300ms后執(zhí)行“澹回調(diào)日期結(jié)果：2018-04-07
|
| template | Function或String |
可選狸捅，元素渲染的模板，可以是一個(gè)模板字符串累提，也可以是一個(gè)函數(shù)尘喝，為函數(shù)時(shí)，確保返回模板字符串斋陪，默認(rèn)組件內(nèi)置模板 |
| isDebug | Boolean |
可選是否開啟調(diào)試模式朽褪，默認(rèn)false
|
API
生成的weekcalendar對(duì)象可以調(diào)用如下API
var weekcalendar = new CalendarWeek(...);
refresh()
外部刷新方法，重洗渲染當(dāng)前周的列表數(shù)據(jù)无虚。
weekcalendar.refresh();
slidePrev()
切換為上一周缔赠，與組件內(nèi)部傳入?yún)?shù)pre作用一樣，該API支持Promise異步成功回調(diào)里處理自己的業(yè)務(wù)邏輯友题。
weekcalendar.slidePrev().then(...).then(...);
slideNext()
切換為下一周嗤堰，與組件內(nèi)部傳入?yún)?shù)next作用一樣，該API支持Promise異步成功回調(diào)里處理自己的業(yè)務(wù)邏輯度宦。
weekcalendar.slideNext().then(...).then(...);
優(yōu)點(diǎn)和好處
能夠極大方便實(shí)際項(xiàng)目上開發(fā)人員的上手使用踢匣，而且版本是不斷根據(jù)實(shí)際項(xiàng)目上的需求進(jìn)行優(yōu)化升級(jí)的，開放源碼可以讓特殊需求的項(xiàng)目開發(fā)人員進(jìn)行修改斗埂、補(bǔ)充和完善符糊。
存在的不足之處
目前依賴js庫有多個(gè)（mustache.min.js、mui.min.js）主要是一些常用的移動(dòng)端js庫（無可厚非）呛凶，包含組件的核心庫，或許有人認(rèn)為影響加載速度之類的行贪，其實(shí)已經(jīng)有很多項(xiàng)目在應(yīng)用效果還可以漾稀，當(dāng)然了小編也正在努力剝離第三方j(luò)s庫,思路已經(jīng)有了模闲，只不過需要一點(diǎn)時(shí)間進(jìn)行代碼重構(gòu)，若在此之前給你帶來的不便崭捍，還請(qǐng)多多包涵尸折，畢竟優(yōu)化組件確實(shí)需要花費(fèi)大量時(shí)間的。
