バーチャルリストVueコンポーネント

バーチャルリストは個別のVueコンポーネントではなく、<f7-list>、<f7-list-item> VueコンポーネントとFramework7の特別なバーチャルリストコンポーネントを使用する特定のケースです。

バーチャルリストのプロパティ

プロパティ	型	デフォルト	説明
<f7-list>プロパティ
virtual-list	ブール値	false	バーチャルリストを有効にします
virtual-list-params	オブジェクト		バーチャルリストパラメータを含むオブジェクト

バーチャルリストイベント

イベント	説明
<f7-list>イベント
virtual:itembeforeinsert	アイテムが仮想ドキュメントフラグメントに追加される前にトリガーされるイベント
virtual:itemsbeforeinsert	現在のDOMリストが削除され、新しいドキュメントが挿入される前にトリガーされるイベント
virtual:itemsafterinsert	アイテムが挿入された新しいドキュメントフラグメントが挿入された後にトリガーされるイベント
virtual:beforeclear	現在のDOMリストが削除され、新しいドキュメントフラグメントに置き換えられる前にトリガーされるイベント

例

バーチャルリストと検索バーを使用してバーチャルリストアイテムを検索する完全なページの例を次に示します。

virtual-list.vue

<template>
  <f7-page>
    <f7-navbar title="Virtual List">
      <f7-subnavbar :inner="false">
        <f7-searchbar
          search-container=".virtual-list"
          search-item="li"
          search-in=".item-title"
        ></f7-searchbar>
      </f7-subnavbar>
    </f7-navbar>
    <f7-block>
      <p>
        Virtual List allows to render lists with huge amount of elements without loss of
        performance. And it is fully compatible with all Framework7 list components such as Search
        Bar, Infinite Scroll, Pull To Refresh, Swipeouts (swipe-to-delete) and Sortable.
      </p>
      <p>Here is the example of virtual list with 10 000 items:</p>
    </f7-block>
    <f7-list strong outline-ios inset-md dividers-ios class="searchbar-not-found">
      <f7-list-item title="Nothing found"></f7-list-item>
    </f7-list>
    <f7-list
      strong
      outline-ios
      inset-md
      dividers-ios
      class="searchbar-found"
      medial-list
      virtual-list
      :virtual-list-params="{
        items,
        searchAll,
        renderExternal,
        height: theme.ios ? 63 : theme.md ? 73 : 77,
      }"
    >
      <ul>
        <f7-list-item
          v-for="(item, index) in vlData.items"
          :key="index"
          media-item
          link="#"
          :title="item.title"
          :subtitle="item.subtitle"
          :style="`top: ${vlData.topPosition}px`"
          :virtual-list-index="item.index"
        ></f7-list-item>
      </ul>
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7List,
  f7ListItem,
  f7Subnavbar,
  f7Searchbar,
  f7Block,
  theme,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7List,
    f7ListItem,
    f7Subnavbar,
    f7Searchbar,
    f7Block,
  },
  data() {
    const items = [];
    for (let i = 1; i <= 10000; i += 1) {
      items.push({
        title: `Item ${i}`,
        subtitle: `Subtitle ${i}`,
        index: i,
      });
    }
    return {
      theme,
      items,
      vlData: {
        items: [],
      },
    };
  },
  methods: {
    searchAll(query, items) {
      const found = [];
      for (let i = 0; i < items.length; i += 1) {
        if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '')
          found.push(i);
      }
      return found; // return array with mathced indexes
    },
    renderExternal(vl, vlData) {
      this.vlData = vlData;
    },
  },
};
</script>

このドキュメントを改善する

このページについて

バーチャルリストのプロパティ
バーチャルリストイベント
例