Framework7-virtual-list

提供：Dev Guides
移動先:案内、検索

Framework7-仮想リスト

説明

仮想リストはリストビューの一種であり、パフォーマンスを低下させることなく多数のデータ要素が含まれます。 _list-block_クラスとともに_virtual-list_クラスを使用して、仮想リストのHTMLレイアウトを作成できます。

仮想リストの初期化

次の方法を使用して、仮想リストを初期化できます- 

myApp.virtualList(listBlockContainer, parameters)

メソッドには、次のパラメータが含まれています-

  • listBlockContainer -リストブロックコンテナに必要なHTMLまたは文字列要素です。
  • パラメータ-これは必須のオブジェクトであり、仮想リストのパラメータが含まれています。

仮想リストのパラメーター

次の表は、仮想パラメータのリストを提供します-

S.No Parameter & Description Type Default
1

items

配列項目のリストを提供します。

array -
2

rowsBefore

画面位置をスクロールする前に表示される行数を定義します。

number -
3

rowsAfter

画面位置をスクロールした後に表示される行数を定義します。

number -
4

cols

行ごとのアイテム数を指定します。

number 1
5

height

このパラメーターは、アイテムの高さをpxで返します。

number or function (item) 44
6

template

単一のアイテムを表します。

string or function -
7

renderItem

カスタム関数を使用して、アイテムのHTMLを表示します。

function (index, item) -
8

dynamicHeightBufferSize

仮想リストのバッファサイズと動的な高さを指定します。

number 1
9

cache

アイテムのリストのDOMキャッシュを有効または無効にすることができます。

boolean true
10

updatableScroll

デバイスを更新し、ページをスクロールするとスクロールイベントを操作します。

boolean -
11

showFilteredItemsOnly

filter（）メソッドを使用して、フィルタリングされたアイテムを表示します。

boolean false
12

searchByItem

検索バーを使用してアイテムを検索するために使用され、検索クエリ、アイテムインデックス、アイテム自体をパラメーターとして使用します。

function (query, index, item) -
13

searchAll

検索バーを使用してすべてのアイテムを検索し、検索クエリとアイテムの配列をパラメーターとして使用します。

function (query, items) -
14

onItemBeforeInsert

アイテムを仮想ドキュメントフラグメントに挿入する前に、コールバック関数を実行します。

function (list, item)
15

onBeforeClear

DOMリストを削除する前にコールバック関数を実行し、新しいドキュメントフラグメントに置き換えます。

function (list, item)
16

onItemsBeforeInsert

DOMリストを削除した後、新しいドキュメントフラグメントを挿入する前に、コールバック関数を実行します。

function (list, item)
17

onItemsAfterInsert

新しいドキュメントフラグメントで項目を挿入した後、コールバック関数を実行します。

function (list, item)

仮想リストのプロパティ

S.No Property & Description
1

myList.items

配列をアイテムとともに表示します。

2

myList.filteredItems

フィルターされたアイテムを含む配列を表示します。

3

myList.domCache

DOMキャッシュを持つアイテムを表します。

4

myList.params

初期化時に渡されるパラメーターを表示します。

5

myList.listBlock

DOM7インスタンスのリストブロックコンテナーを指定します。

6

myList.pageContent

DOM7インスタンスのページコンテンツコンテナーを指定します。

7

myList.currentFromIndex

最初にレンダリングされたアイテムを表示します。

8

myList.currentToIndex

最後にレンダリングされたアイテムを表示します。

9

myList.reachEnd

trueの場合、指定されたすべてのアイテムの最後のアイテムが表示されます。

仮想リストメソッド

S.No Method & Description
1

myList.filterItems(indexes);

インデックス付きの配列を使用して、アイテムをフィルタリングできます。

2

myList.resetFilter();

フィルターを防止して、すべてのアイテムを表示します。

3

myList.appendItem(item);

アイテムを仮想リストに追加します。

4

myList.appendItems(items);

アイテムの配列を仮想リストに追加します。

5

myList.prependItem(item);

アイテムを仮想リストの先頭に追加します。

6

myList.prependItems(items);

アイテムの配列を仮想リストの先頭に追加します。

7

myList.replaceItem(index, items);

指定されたインデックスでアイテムを新しいアイテムに置き換えます。

8

myList.replaceAllItems(items);

すべてのアイテムを新しいアイテムに置き換えます。

9

myList.moveItem(oldIndex, newIndex);

古いインデックスから新しいインデックスにアイテムを転送します。

10

myList.insertItemBefore(index, item);

指定したインデックスの前にアイテムを挿入できます。

11

myList.deleteItem(index);

指定したインデックスにあるアイテムを削除できます。

12

myList.deleteItems(indexes);

指定したインデックスの配列にあるアイテムを削除できます。

13

myList.deleteAllItems();

すべてのアイテムを削除します。

14

myList.clearCache();

DOM要素のキャッシュをクリアするために使用されます。

15

myList.destroy();

仮想リストとそのイベントを破壊します。

16

myList.update();

仮想リストを更新し、仮想リストを再レンダリングします。

17

myList.scrollToItem(index);

インデックス番号を使用して、仮想リストをアイテムにスクロールできます。

テンプレート

いくつかのロジックを使用して、JSONデータからアイテムをフィルタリングまたはロードする必要がある場合があります。 これを行うには、_items_パラメーターと_template_パラメーターを使用して、または_renderItem_パラメーターを使用して、データオブジェクトに配列を渡すことができます。

次のようにFramework7 _template_パラメータを使用することができます- 

var myVal = myApp.virtualList('.list-block.virtual-list', {
  //List of array items
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
     //...
      {
         name: 'Element 50',
         image: '/path/image50.jpg'
      },
   ],

  //Display the each item using Template7 template parameter
   template:
      '<li class = "item-content">' +
         '<div class = "item-media"><img src = "{{image}}"></div>' +
         '<div class = "item-inner">' +
            '<div class = "item-title">{{name}}</div>' +
         '</div>' +
      '</li>'
});

以下に示すように、カスタムレンダリング関数を使用することもできます- 

var myVal = myApp.virtualList('.list-block.virtual-list', {
  //List of array items
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
     //...
      {
         name: 'Element 50',
         image: '/path/image50.jpg'
      },
   ],

  //Display the each item using custom render function
   renderItem:
      '<li class = "item-content">' +
         '<div class = "item-media"><img src = "{{image}}"></div>' +
         '<div class = "item-inner">' +
            '<div class = "item-title">{{name}}</div>' +
         '</div>' +
      '</li>'
});

検索バーで使用する

パラメーターで検索機能を提供する仮想リストで検索バーを使用するには、_searchAll_または_searchByItem_パラメーターを使用できます。 

var myVal = myApp.virtualList('.list-block.virtual-list', {
  //List of array items
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
     //...
      {
         name: 'Element 50',
         image: '/path/image50.jpg'
      },
   ],

  //Here you can searches all items in array and send back array with matched items
   searchAll: function (query, items) {
      var myItems = [];

         for (var i = 0; i < items.length; i++) {
           //Here check if name contains query string
            if (items[i].name.indexOf(query.trim()) >= 0) myItems.push(i);
         }

        //Returns array with indexes of matched items
         return myItems;
   }
});

_searchByItem_パラメータの使用- 

var myVal = myApp.virtualList('.list-block.virtual-list', {
  //List of array items
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
     //...
      {
         name: 'Element 50',
         image: '/path/image50.jpg'
      },
   ],

  //Here you can searches all items in array and send back array with matched items
   searchByItem: function (query, index, items) {
     //Here check if name contains query string
         if (items[i].name.indexOf(query.trim()) >= 0){
            return true;
         }  else {
            return false;
         }
      }
   }
});

動的な高さ

数値の代わりに_height_パラメーターを使用して、アイテムの動的な高さを使用できます。 

var myVal = myApp.virtualList('.list-block.virtual-list', {
  //List of array items
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
     //...
      {
         name: 'Element 50',
         image: '/path/image50.jpg'
      },
   ],

  //template parameter
   template: '...',

  //using height function
   height: function (item) {
      if (item.image) return 120;//display the image with 100px height
      else return 50;//display the image with 50px height
   }
});

APIメソッド

APIメソッドを使用して、仮想リストアイテムを追加、削除、置換、または移動できます。 

//Here you can initialize the list
var myVal = myApp.virtualList('.list-block.virtual-list', {
  //List of array items
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
     //...
      {
         name: 'Element 50',
            image: '/path/image50.jpg'
      },
   ],
  //template parameter
   template: '...',
});

//Here append your item
myVal.appendItem({
    image: 'Element 55'
});

//You can append multiple items when clicking on button
$('.button.append-items').on('click', function () {
  //You can append multiple items by passing array with items
   myVal.appendItem ([
      {
         image: 'Element 60'
      },
      {
         image: 'Element 61'
      },
      {
         image: 'Element 62'
      }
   ]);
});

//replace the first item
myList.replaceItem(0, {
   name: 'Element 4'
});

//you can display first 10 items when clicking on button
$('.button.show-first-10').on('click', function () {
  //Passing array with indexes to show items
   myList.filter([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
});

//Reset the filter
$('.button.reset-filter').on('click', function () {
   myList.resetFilter();
});

//You can insert the item before 4th and 5th item
myList.insertItemBefore(1, {
   name: 'Element 4.5'
});
「https://www.finddevguides.com/index.php?title=Framework7-virtual-list&oldid=30549」から取得
Powered by MediaWiki