Framework7 - 虚拟列表

---

---

描述

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

初始化虚拟列表

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

myApp.virtualList(listBlockContainer, parameters)

该方法包含以下参数：

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

• parameters - 它是必需的对象，其中包含虚拟列表参数。

虚拟列表参数

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

虚拟列表属性

虚拟列表方法

模板

有时您需要使用某些逻辑从 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'
});