移動端H5周歷組件

incredible 發布于2019-08-22 16:35 / 2446人閱讀

摘要：默認可選回調函數，綁定業務數據。切換為下一周，與組件內部傳入參數作用一樣，該支持異步成功回調里處理自己的業務邏輯。

文檔維護者：孫尊路

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

適用場景

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

實例展示

周歷示例演示，支持上一周、下一周切換等效果 注：按F12可在瀏覽器預覽

示例demo源代碼(H5)：點擊此處進行下載

典型項目應用案例

【移動OA類】我的日志

依賴資源

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

配置和使用方法

DOM結構

一個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庫,思路已經有了，只不過需要一點時間進行代碼重構，若在此之前給你帶來的不便，還請多多包涵，畢竟優化組件確實需要花費大量時間的。

云服務器 GPU云服務器移動端webrtc h5 H5移動端上傳圖片服務端組件手機端webrtc h5

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94491.html

前端基礎入門

摘要：手把手教你做個人火的時候，隨便一個都能賺的盆滿缽滿，但是，個人沒有服務端，沒有美工，似乎就不能開發了，真的是這樣的嗎秘密花園經典的中文手冊。涵蓋前端知識體系知識結構圖書推薦以及入門視頻教程，全的簡直不要不要的了。 JavaScript 實現點擊按鈕復制指定區域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實現點擊按鈕復制區域文本的功能，不需要依賴 flash。...

shinezejian 2019-08-22 13:51 評論0 收藏0
實踐出真知：零基礎小白學編程做游戲的 14 周歷程

摘要：謝耳朵愛玩的游戲，石頭剪子布的升級版。擁有最高點數的玩家獲勝，其點數必須等于或低于點。在編寫這個游戲的過程中第一次引入了類概念。宇宙空間中微小的摩擦力和隕石撞擊后受到的力，都要考慮并且編入游戲中。人人都應該學編程嗎？隨著每個人的工作與電腦連結愈發緊密，也許這是真的。我是游戲設計師，在分工細致的國內網游業界，不需要研發或美術背景也能擔當游戲設計重任的角色多了起來。有時候他們甚至只需...

haitiancoder 2019-07-24 17:42 評論0 收藏0
FineReport中如何安裝移動端H5插件

摘要：移動端報表使用方法安裝好插件后，在瀏覽器中調用時，需要在報表路徑后面加上參數。另外移動端的插件，圖表是只支持顯示新圖表。 HTML5報表插件安裝及使用編輯插件安裝插件網址以及設計器插件安裝方法和服務器安裝插件的方法可以官網上面搜索，這里就不做詳細介紹了。移動端HTML5報表使用方法安裝好插件后，在瀏覽器中調用時，需要在報表路徑后面加上參數op=h5。但是PC端不完全支持H5效果。移...

bovenson 2019-08-20 15:52 評論0 收藏0