目录
  1. WIKI教程
  2. 学习Framework7
  3. Virtual List

Virtual List

描述 (Description)

虚拟列表是一种列表视图，其中包含大量数据元素而不会降低其性能。 您可以使用virtual-list类和list-block类创建虚拟列表的HTML布局。

初始化虚拟列表

您可以使用以下方法初始化虚拟列表 - 

myApp.virtualList(listBlockContainer, parameters)

该方法包含以下参数 -

  • listBlockContainer - 它是列表块容器的必需HTML或字符串元素。

  • parameters - 它是一个必需的对象，包括虚拟列表参数。

虚拟列表参数

下表提供了虚拟参数列表 -

S.No 参数和描述 类型 默认
1

items

提供数组项列表。

array-
2

rowsBefore

它定义在滚动屏幕位置之前要显示的行数。

number-
3

rowsAfter

它定义了滚动屏幕位置后要显示的行数。

number-
4

cols

它指定每行的项目数。

number1
5

height

此参数以px为单位返回项目高度。

number or function (item)44
6

template

它代表单个项目。

字符串或功能 -
7

renderItem

它使用自定义函数来显示项目HTML。

function (index, item)-
8

dynamicHeightBufferSize

它指定虚拟列表上的缓冲区大小以及动态高度。

number1
9

cache

您可以为项目列表启用或禁用DOM缓存。

booleantrue
10

updatableScroll

当您滚动页面时，它会更新设备并操纵滚动事件。

boolean-
11

showFilteredItemsOnly

它使用filter（）方法显示已过滤的项目。

booleanfalse
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 财产和描述
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

如果为真，则显示所有指定项目的最后一项。

虚拟列表方法

S.No 方法和描述
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);

您可以使用索引号将虚拟列表滚动到项目。

模板(Templating)

有时您需要使用某些逻辑从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'
});
↑回到顶部↑
WIKI教程 @2018