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', {
   //数组项列表
   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', {
   //数组项列表
   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', {
   //数组项列表
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
      // ...
      {
         name: 'Element 50',
         image: '/path/image50.jpg'
      },
   ],
   
   //在这里您可以搜索数组中的所有项目并返回包含匹配项目的数组
   searchAll: function (query, items) {
      var myItems = [];
      
         for (var i = 0; i < items.length; i++) {
            // 在这里检查名称是否包含查询字符串
            if (items[i].name.indexOf(query.trim()) >= 0) myItems.push(i);
         }
         
         // 返回包含匹配项索引的数组
         return myItems;
   }
});

使用 searchByItem 参数 −

var myVal = myApp.virtualList('.list-block.virtual-list', {
   //数组项列表
   items: [
      {
         name: 'Element 1',
         image: '/path/image1.jpg'
      },
      {
         name: 'Element 2',
         image: '/path/image2.jpg'
      },
      // ...
      {
         name: 'Element 50',
         image: '/path/image50.jpg'
      },
   ],
   
   //在这里您可以搜索数组中的所有项目并返回包含匹配项目的数组
   searchByItem: function (query, index, items) {
      // 在这里检查名称是否包含查询字符串
         if (items[i].name.indexOf(query.trim()) >= 0){
            return true;
         }  else {
            return false;
         }
      }
   }
});

动态高度

您可以使用 height 参数(而不是数字)为项目使用动态高度。

var myVal = myApp.virtualList('.list-block.virtual-list', {
   //数组项列表
   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; //显示高度为 100px 的图像
      else return 50; //显示高度为 50px 的图像
   }
});

API 方法

您可以使用 API 方法添加、删除、替换或移动虚拟列表项。

//您可以在此处初始化列表
var myVal = myApp.virtualList('.list-block.virtual-list', {
   //数组项列表
   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: '...',
});

//此处附加您的项目
myVal.appendItem({
    image: 'Element 55'
});

// 点击按钮时您可以附加多个项目
$('.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'
      }
   ]);
});

//替换第一项
myList.replaceItem(0, {
    name: 'Element 4'
});

//单击按钮时可以显示前 10 项
$('.button.show-first-10').on('click', function () {
    //传递带有索引的数组以显示项目
    myList.filter([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
});

//重置过滤器
$('.button.reset-filter').on('click', function () {
    myList.resetFilter();
});

//可以在第 4 项和第 5 项之前插入该项目
myList.insertItemBefore(1, {
   name: 'Element 4.5'
});

framework7_list_views.html