List Index with Virtual List


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


You can find more samples on

Something like this:

  <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>
        <div class="title">List Index</div>
    <div class="list-index"></div>
    <div class="page-content">
      <div class="list contacts-list"></div>
  export default (props, { $f7, $el, $onMounted, $onBeforeUnmount }) => {
    let listIndex;
    let vl;

    const names = [

    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"
        // 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);
    $onBeforeUnmount(() => {
      if (listIndex) {
      if (vl) {

    return $render;
1 Like

Thank you for the example, really appreciate it.

Thank you for the info.