knokout列表控件

時間  2019-11-10
標籤 knokout 列表 控件 简体版
原文   原文鏈接

Knockout列表控件

1.功能說明

支持數據列表功能的使用，列表能夠是固定長度的列表也能夠是不固定長度根據加載數據的多少來展現,支持上下拉加載數據，側滑刪除，長按和行點擊。javascript

列表對應的數據結構是JSON數組，例如，下面的JSON結構：css

  1. var data = [{
  2. 'name' : '應用商店',
  3. 'descri' : '這是一段關於應用的描述,能夠點擊進入查看詳情',
  4. 'img' : 'img/app_store.png'
  5. }, {
  6. 'name' : '動聽音樂',
  7. 'descri' : '這是一段關於應用的描述,能夠點擊進入查看詳情',
  8. 'img' : 'img/music.png'
  9. }];

2.HTML結構及圖示

列表總體效果圖以下：

列表每一行結構圖示：

列表HTML結構以下：html

  1. <div class="um-listview-wrap" id="listview">
  2. <ul class="um-list um-no-active">
  3. <li class="um-listview-row">
  4. <a href="#" class="um-list-item um-swipe-action">
  5. <div class="um-swipe-btns">
  6. <span class="um-swipe-btn um-delete">刪除</span>
  7. <!--此區域可自定義按鈕，結構同上面刪除按鈕同樣，其位置對應上圖2.3的紅色區域4-->
  8. </div>
  9. <div class="um-list-item-media">
  10. <!-- 此區域內容可自定義,其位置對應上圖2.2的區域1，通常放置圖片，單選框，複選框等等， -->
  11. </div>
  12. <div class="um-list-item-inner">
  13. <div class="um-list-item-body">
  14. <!-- 此區域內容可自定義,其位置對應上圖2.2的區域２，通常放置單行或多行文字 -->
  15. </div>
  16. <div class="um-list-item-right">
  17. <span class="um-badge um-btn-success mr10">3</span>
  18. <!-- 此區域可自定義,其位置對應上圖2.2的區域３，通常放置次要內容，好比數字氣泡，提示文字 -->
  19. </div>
  20. </div> </a>
  21. </li>
  22. </ul>
  23. </div>

3.控件初始化

  1. var listview = UM.listview(selector, opts);

其中UM.listview方法會根據列表控件的css選擇器和相關配置對象opts,構造一個新的列表對象，並返回給變量listview(可自定義名字)，以第二節所示HTML結構爲例，可用如下代碼初始化控件：java

  1. var listview = UM.listview(‘#listview’, {});

opts配置對象支持屬性以下(除非特殊說明，通常狀況下配置對象屬性的屬性值不帶單位)：jquery

配置對象屬性 描述 默認值
height 設置列表控件高度(數字，單位爲px) 高度默認佔滿父盒子
width 設置列表控件寬度(數字，單位爲px)。 寬度默認佔滿父盒子
pullDistance 設定列表上下拉動多少px距離後觸發上下拉事件(pullUp,pullDown) 默認爲30px
tapHoldTime 設定手指在列表上長按多少毫秒後觸發長按事件(tapHold) 默認爲500ms

4.控件方法

爲了闡述方便，下面的listview變量都表示通過UM.listview方法初始化以後的列表實例對象。json

4.1 監聽方法

控件方法 描述 特殊說明
itemClick 手指在列表行上點擊時觸發，並執行回調  
itemDelete 手指在列表行上點擊刪除按鈕時觸發，並執行回調 只有當列表行HTML結構內刪除按鈕(帶有.um-delete類)存在，且被點擊時才生效;一般與工具方法removeItem一塊兒使用
itemSwipeLeft 手指在列表行上左滑時觸發，並執行回調  
itemSwipeRight 手指在列表行上右滑時觸發，並執行回調  
pullUp 上拉列表一段距離後觸發，並執行回調 一般與工具方法refresh一塊兒使用
pullDown 下拉列表一段距離後觸發，並執行回調 一般與工具方法refresh一塊兒使用
tapHold 手指在列表上長按一段時間後觸發，並執行回調  
on 監聽以上事件類型，並觸發回調 *

4.1.1 itemclick(行點擊)api

調用示例：數組

  1. listview.itemClick(function(sender, args){});
  2. //等效於如下代碼
  3. listview.on(‘itemClick’,function(sender,args){});

參數說明：sender指代listview實例對象，args對象具備rowIndex（行索引）和$target（目標行DOM的jquery對象）markdown

4.1.2 itemDelete(行刪除）數據結構

調用示例：

  1. listview.itemDelete(function(sender, args){});
  2. //等效於如下代碼
  3. listview.on(‘itemDelete’,function(sender,args){});

參數說明：sender指代listview實例對象，args對象具備rowIndex（行索引）和$target（目標行DOM的jquery對象）

4.1.3 itemSwipeLeft(行左滑)

調用示例：

  1. listview.itemSwipeLeft(function(sender, args){});
  2. //等效於如下代碼
  3. listview.on(‘itemSwipeLeft’,function(sender,args){});

參數說明：sender指代listview實例對象，args對象具備rowIndex（行索引）和$target（目標行DOM的jquery對象）

4.1.4 itemSwipeRight(行右滑)

調用示例：

  1. listview.itemSwipeRight(function(sender, args){});
  2. //等效於如下代碼
  3. listview.on(‘itemSwipeRight’,function(sender,args){});

參數說明：sender指代listview實例對象，args對象具備rowIndex（行索引）和$target（目標行DOM的jquery對象）

4.1.5 pullUp(上拉列表)

調用示例：

  1. listview.pullUp(function(sender){});
  2. //等效於如下代碼
  3. listview.on(‘pullUp’,function(sender){});

參數說明：sender指代listview實例對象

4.1.6 pullDown(下拉列表)

調用示例：

  1. listview.pullDown(function(sender){});
  2. //等效於如下代碼
  3. listview.on(‘pullDown’,function(sender){});

4.1.7 tapHold(長按列表)

調用示例：

  1. listview.tapHold(function(sender){});
  2. //等效於如下代碼
  3. listview.on(‘tapHold’,function(sender){});

4.1.8 on(監聽列表事件)

調用示例：

  1. listview.on(‘itemClick’,function(sender,args){}); //監聽行點擊
  2. listview.on(‘tapHold’,function(sender){}); //監聽列表長按

參數說明：sender指代listview實例對象

4.2 工具方法

控件方法 描述 特殊說明
showItemMenu 滑動顯示列表行菜單 只有當列表行HTML結構內存在圖2.3所標識的區域4，此方法纔有意義
hideItemMenu 滑動隱藏列表行菜單 只有當列表行HTML結構內存在圖2.3所標識的區域4，此方法纔有意義
refresh 更新列表，並隱藏上下拉列表時的加載條 一般在pullUp與pullDown方法回調函數裏面使用

4.2.1 showItemMenu(顯示列表行菜單）

調用示例：

  1. listview.showMenuItem($elem);

參數說明：請注意上面紅色字體標註部分， $elem表示目標行DOM結構的jquery化後的對象

該方法一般與itemSwipeLeft方法一塊兒使用,以下所示：

  1. listview.itemSwipeLeft(function(sender, args){
  2. sender.showMenuItem(args.$target);
  3. });

4.2.2 hideMenuItem(隱藏列表行菜單)

調用示例：

  1. listview.hideMenuItem($elem);

參數說明：請注意上面紅色字體標註部分， $elem表示目標行DOM結構的jquery化後的對象

該方法一般與itemSwipeRight方法一塊兒使用,以下所示：

  1. listview.itemSwipeRight(function(sender, args){
  2. sender.hideMenuItem(args.$target);
  3. });

4.2.3 refresh(上下拉以後更新列表)

調用示例：

  1. listview.refresh();

該方法一般與pullUp或者pullDown方法一塊兒使用,以下所示：

  1. listview.pullUp(function(sender){
  2. //這裏書寫本身的代碼
  3. sender.refresh();
  4. });
  6. listview.pullDown(function(sender){
  7. //這裏書寫本身的代碼
  8. sender.refresh();
  9. });

5.一個完整示例

如下是一個完整的實例，ＤＯＭ結構使用KnockoutJS渲染，結構與本文第2節有差別的地方，就是多了幾個綁定字段。假設json結構以下：

  1. var data = [{
  2. 'name' : '應用商店',
  3. 'descri' : '這是一段關於應用的描述,能夠點擊進入查看詳情',
  4. 'img' : 'img/app_store.png'
  5. }, {
  6. 'name' : '動聽音樂',
  7. 'descri' : '這是一段關於應用的描述,能夠點擊進入查看詳情',
  8. 'img' : 'img/music.png'
  9. }];

這是最終效果：

5.1 DOM結構

  1. <div class="um-listview-wrap" id="listview">
  2. <ul class="um-form um-no-active" data-bind="foreach:data">
  3. <li class="um-listview-row">
  4. <a href="#" class="um-list-item um-swipe-action">
  5. <div class="um-swipe-btns">
  6. <span class="um-swipe-btn">自定義</span>
  7. <span class="um-swipe-btn um-delete">刪除</span>
  8. </div>
  9. <div class="um-list-item-media">
  10. <img alt="" width=50 data-bind="attr:{src: img}">
  11. </div>
  12. <div class="um-list-item-inner">
  13. <div class="um-list-item-body">
  14. <h4 data-bind="text:name" class="f16"></h4>
  15. <p data-bind="text:descri" class="f14 um-text-overflow"></p>
  16. </div>
  17. <div class="um-list-item-right">
  18. <span class="um-badge um-btn-success mr10">3</span>
  19. </div>
  20. </div> </a>
  21. </li>
  22. </ul>
  23. </div>

5.2 Knockout加載數據

  1. var ViewModel = function(data) {
  2. var self = this;
  3. self.data = ko.observableArray(data);
  4. };
  6. var viewModel = new ViewModel(data);
  7. ko.applyBindings(viewModel);

注：data爲第5.1節所示數據對象。

5.3 列表控件初始化

  1. var listview = UM.listview('#listview'，{
  2. //此處可對照本文第3節設置配置對象屬性
  3. });

5.4 添加控件方法

  1. listview.on('pullDown', function(sender) {
  2. viewModel.data.unshift({
  3. 'name' : '新增應用',
  4. 'descri' : '這是一段關於應用的描述,能夠點擊進入查看詳情',
  5. 'img' : 'img/app_default1.png'
  6. });
  7. sender.refresh();
  8. }).on('pullUp', function(sender) {
  9. viewModel.data.push({
  10. 'name' : '新增應用',
  11. 'descri' : '這是一段關於應用的描述,能夠點擊進入查看詳情',
  12. 'img' : 'img/app_default2.png'
  13. });
  14. sender.refresh();
  15. }).on('itemDelete', function(sender, args) {
  16. args.$target.slideUp(500, function() {
  17. });
  18. }).on('itemClick', function(sender, args) {
  19. //console.log(args);
  20. }).on('itemSwipeLeft', function(sender, args) {
  21. sender.showItemMenu(args.$target);
  22. }).on('itemSwipeRight', function(sender, args) {
  23. sender.hideItemMenu(args.$target);
  24. }).on('tapHold', function() {
  25. //console.log('yes');
  26. });

至此一個完整的示例就實現了

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程