Virtual List

描述 (Description)

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

初始化虚拟列表

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

myApp.virtualList(listBlockContainer, parameters)

该方法包含以下参数 -

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

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

虚拟列表参数

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

虚拟列表属性

虚拟列表方法

模板(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'
});