Framework7-Vue Starter

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.bundle.min.css">
<script src="https://unpkg.com/[email protected]/framework7-vue.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>

    <!-- Main View -->
    <f7-view id="main-view" main>
      <f7-page>
        <f7-navbar>
          <f7-nav-title>My App</f7-nav-title>
        </f7-navbar>
        <f7-list>
          <f7-list-item title=" not virtual list (works fine)" smart-select :smart-select-params="{openIn: 'popup'}">
            <select name="names">
              <optgroup v-for="(optgroup, index) in names" :key="index" :label="optgroup.group_label">
                <option v-for="option in optgroup.items" :key="index" :value="option">
                  {{ option }}
                </option>
              </optgroup>
            </select>
          </f7-list-item>
          <!-- Using virtualList:true, the optgroup dividers using sticky position become not sync due to wrong top position?-->

          <f7-list-item title=" using FIXED virtual list" smart-select :smart-select-params="{ virtualList:true, openIn: 'popup' 
      ,on: {
        opened: smartSelectOnOpen,
      } }">
            <select name="names">
              <optgroup v-for="(optgroup, index) in names" :key="index" :label="optgroup.group_label">
                <option v-for="option in optgroup.items" :key="index" :value="option">
                  {{ option }}
                </option>
              </optgroup>
            </select>
          </f7-list-item>
        </f7-list>
      </f7-page>
    </f7-view>
  </f7-app>
</div>

CSS

/*Allow smartSelect dividers to sticky*/
.smart-select-page ul li.item-divider{
  /*position: relative;*/
	/*position: -webkit-sticky;*/
  position:sticky;
	top: 0;
	/*margin-top: 0;*/
	/*z-index: 20;*/
}

JavaScript

// Init F7 Vue Plugin
Framework7.use(Framework7Vue)


// Init App
new Vue({
  el: '#app',
  data() {
  	return {
		  // Framework7 params here
    	f7params: {
      	root: '#app', // App root element
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection
        // App routes
      }
    }
  },
  computed:{
  
  names(){
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',
    ];
  ...