虚拟列表

虚拟列表可以用来渲染有大量数据的列表，并且不有有任何的性能问题。并且，它和所有的Framework7组件都是兼容的，包括搜索栏、无限滚动、下拉刷新、滑动删除和可排序列表。

虚拟列表的HTML结构

虚拟列表打HTML结构非常简单，他和常见的 列表 或者 多媒体列表只有一个区别，你必须把它的内容设置为空的。

<!-- Virtual List -->
<div class="list-block virtual-list">
  <!-- 内容置空 -->
</div>

其中:

• virtual-list - 在使用虚拟列表的容器上增加这个类

初始化虚拟列表

现在，当我们有了列表的HTML，我们下一步是初始化它。我们需要用到这些App方法：

比如:

var myList = app.virtualList('.list-block', {
    items: [1,2,3,4],
    height: 44
});

虚拟列表的初始化参数

下面是所有的初始化参数：

虚拟列表方法和属性

当我们初始化完成之后，我们就有一个存储了虚拟列表实例的变量(比如上面例子中的 myList变量)，这个实例有很有有用的方法和属性：

示例

简单的条目

最简单的一种情况，我们不需要用模板来渲染条目（没有 template 和 renderItem 参数)，并且我们也不需要复杂的逻辑，我们直接在 items 参数中传入了HTML字符串:

var myList = myApp.virtualList('.list-block.virtual-list', {
    // Array with plain HTML items
    items: [
        '<li class="item-content"><div clas="item-inner"><div class="item-title">Item 1</div></div></li>',
        '<li class="item-content"><div clas="item-inner"><div class="item-title">Item 2</div></div></li>',
        '<li class="item-content"><div clas="item-inner"><div class="item-title">Item 3</div></div></li>',
        //...
        '<li class="item-content"><div clas="item-inner"><div class="item-title">Item 1000</div></div></li>'
    ]
});

使用模板

但是大部分情况下，我们需要有一些过滤和渲染的逻辑，或者我们会从一个JSON字符串中加载数据。这种情况下，我们在 items 参数中传入数据，然后使用 Template7 template 参数或者使用 renderItem 自定义一个渲染函数。

使用Template7模板:

var myList = myApp.virtualList('.list-block.virtual-list', {
    // Array with items data
    items: [
        {
            title: 'Item 1',
            picture: 'path/to/picture1.jpg'
        },
        {
            title: 'Item 2',
            picture: 'path/to/picture2.jpg'
        },
        // ...
        {
            title: 'Item 1000',
            picture: 'path/to/picture1000.jpg'
        },
    ],
    // Template 7 template to render each item
    template: '<li class="item-content">' +
                  '<div class="item-media"><img src="{{picture}}"></div>' +
                  '<div class="item-inner">' +
                      '<div class="item-title">{{title}}</div>' +
                  '</div>' +
               '</li>'
});

使用自定义的渲染函数:

var myList = myApp.virtualList('.list-block.virtual-list', {
    // Array with items data
    items: [
        {
            title: 'Item 1',
            picture: 'path/to/picture1.jpg'
        },
        {
            title: 'Item 2',
            picture: 'path/to/picture2.jpg'
        },
        // ...
        {
            title: 'Item 1000',
            picture: 'path/to/picture1000.jpg'
        },
    ],
    // Custom render function to render item's HTML
    renderItem: function (index, item) {
        return '<li class="item-content">' +
                  '<div class="item-media"><img src="' + item.picture + '"></div>' +
                  '<div class="item-inner">' +
                      '<div class="item-title">' + item.title + '</div>' +
                  '</div>' +
               '</li>';
    }
});

使用搜索栏

如果我们想使用搜索栏，我们必须在初始化的事后传入一个 searchAll 或者 searchByItem 参数：

var myList = myApp.virtualList('.list-block.virtual-list', {
    // Array with items data
    items: [
        {
            title: 'Item 1',
            picture: 'path/to/picture1.jpg'
        },
        {
            title: 'Item 2',
            picture: 'path/to/picture2.jpg'
        },
        // ...
        {
            title: 'Item 1000',
            picture: 'path/to/picture1000.jpg'
        },
    ],
    // search all items, we need to return array with indexes of matched items
    searchAll: function (query, items) {
        var foundItems = [];
        for (var i = 0; i = 0) foundItems.push(i);
        }
        // Return array with indexes of matched items
        return foundItems; 
    }
});

和上面功能相同，但是使用 searchByItem 参数:

var myList = myApp.virtualList('.list-block.virtual-list', {
    // Array with items data
    items: [
        {
            title: 'Item 1',
            picture: 'path/to/picture1.jpg'
        },
        {
            title: 'Item 2',
            picture: 'path/to/picture2.jpg'
        },
        // ...
        {
            title: 'Item 1000',
            picture: 'path/to/picture1000.jpg'
        },
    ],
    // search item by item
    searchByItem: function (query, index, item) {
        // Check if title contains query string
        if (item.title.indexOf(query.trim()) >= 0) {
            return true; //item matches query
        }
        else {
            return false; //item doesn't match
        }
    }
});

动态高度

如果我们的条目并不是都一样高的，那么我们可以通过 height 参数传入一个函数而不是数字来制定高度：

var myList = myApp.virtualList('.list-block.virtual-list', {
    // Array with items data
    items: [
        {
            title: 'Item 1',
            picture: 'path/to/picture1.jpg'
        },
        {
            title: 'Item 2'
        },
        {
            title: 'Item 3',
            picture: 'path/to/picture3.jpg'
        },
        // ...
        {
            title: 'Item 1000'
        },
    ],
    // Item template
    template: '...',
 
    // Height function
    height: function (item) {
        if (item.picture) return 100; //item with picture is 100px height
        else return 44; //item without picture is 44px height
    }
});

API 方法

如果我们需要增加、删除、替换或者移动条目，我们需要使用虚拟列表的相关方法：

// Initialize List
var myList = myApp.virtualList('.list-block.virtual-list', {
    // Array with items data
    items: [
        {
            title: 'Item 1'
        },
        {
            title: 'Item 2'
        },
        // ...
        {
            title: 'Item 1000'
        }
    ],
 
    // Item template
    template: '...',
});
 
// Append Item
myList.appendItem({
    title: 'Item 1001'
});
 
// Append multiple items when clicking on some button
$('.button.append-items').on('click', function () {
    // Append multiple items by passing array with items
    myList.appendItem([
        {
            title: 'Item 1002'
        },
        {
            title: 'Item 1003'
        },
        {
            title: 'Item 1004'
        }
    ]);    
});
 
// Replace First Item
myList.replaceItem(0, {
    title: 'New Item 1'
});
 
// Show only first 10 items when clicking on button
$('.button.show-first-10').on('click', function () {
    // We need to pass array with indexes of items to show
    myList.filter([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
});
 
// Reset filter
$('.button.reset-filter').on('click', function () {
    myList.resetFilter();
});
 
// Insert new item before 1st and 2nd:
myList.insertItemBefore(1, {
    title: 'Item 1.5'
});