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