List Index with Virtual List

1

Hello,

Is there an example of how to achieve list index with virtual list of items using current version 7.02. A
Any help would be appreciated

Kris

2

You can find more samples on

3

Something like this:

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">List Index</div>
      </div>
    </div>
    <div class="list-index"></div>
    <div class="page-content">
      <div class="list contacts-list"></div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $el, $onMounted, $onBeforeUnmount }) => {
    let listIndex;
    let vl;

    const names = [
      'Aaron',
      'Adam',
      'Aiden',
      'Albert',
      'Alex',
      'Alexander',
      'Alfie',
      'Archie',
      'Arthur',
      'Austin',
      'Benjamin',
      'Blake',
      'Bobby',
      'Caleb',
      'Callum',
      'Cameron',
      'Charles',
      'Charlie',
      'Connor',
      'Daniel',
      'David',
      'Dexter',
      'Dylan',
      'Edward',
      'Elijah',
      'Elliot',
      'Elliott',
      'Ethan',
      'Evan',
      'Felix',
      'Finlay',
      'Finley',
      'Frankie',
      'Freddie',
      'Frederick',
      'Gabriel',
      'George',
      'Harley',
      'Harrison',
      'Harry',
      'Harvey',
      'Henry',
      'Hugo',
      'Ibrahim',
      'Isaac',
      'Jack',
      'Jacob',
      'Jake',
      'James',
      'Jamie',
      'Jayden',
      'Jenson',
      'Joseph',
      'Joshua',
      'Jude',
      'Kai',
      'Kian',
      'Leo',
      'Leon',
      'Lewis',
      'Liam',
      'Logan',
      'Louie',
      'Louis',
      'Luca',
      'Lucas',
      'Luke',
      'Mason',
      'Matthew',
      'Max',
      'Michael',
      'Mohammad',
      'Mohammed',
      'Muhammad',
      'Nathan',
      'Noah',
      'Oliver',
      'Ollie',
      'Oscar',
      'Owen',
      'Reuben',
      'Riley',
      'Robert',
      'Ronnie',
      'Rory',
      'Ryan',
      'Samuel',
      'Sebastian',
      'Seth',
      'Sonny',
      'Stanley',
      'Teddy',
      'Theo',
      'Theodore',
      'Thomas',
      'Toby',
      'Tommy',
      'Tyler',
      'William',
      'Zachary',
    ]

    const indexes = [];

    names.forEach((name) => {
      if (!indexes.includes(name[0])) indexes.push(name[0])
    })

    $onMounted(() => {
      vl = $f7.virtualList.create({
        el: $el.value.find('.list'),
        items: names,
      })
      // Create list index instance
      listIndex = $f7.listIndex.create({
        // List el where to look indexes and scroll for
        listEl: $el.value.find('.list'),
        // ".list-index" element
        el: $el.value.find('.list-index'),
        // Generate indexes automatically based on ".list-group-title" and ".item-divider"
        indexes,
        // Scroll list on indexes click and touchmove
        scrollList: true,
        // Enable bubble label when swiping over indexes
        label: true,
        on: {
          select(_, clickedContent) {
            const firstIndexWithLetter = names.findIndex((name) => name[0] === clickedContent);
            vl.scrollToItem(firstIndexWithLetter);
          }
        }
      });
    })
    $onBeforeUnmount(() => {
      if (listIndex) {
        listIndex.destroy();
      }
      if (vl) {
        vl.destroy();
      }
    })

    return $render;
  }
</script>
1 Like
4

Thank you for the example, really appreciate it.
Kris

5

Thank you for the info.