F7-V5 + Vue + lodash + VL

by Maiki Nahara

HTML

<link rel="stylesheet" href="https://unpkg.com/framework7/css/framework7.bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/framework7/js/framework7.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/framework7-vue.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <f7-statusbar></f7-statusbar>
    <f7-view id="main-view" main class="safe-areas">
      <f7-page name="home">
    <!-- Top Navbar -->
    <f7-navbar large :sliding="false">
      <f7-nav-left>
        <f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
      </f7-nav-left>
      <f7-nav-title sliding>My App</f7-nav-title>
      <f7-nav-right>
        <f7-link icon-ios="f7:menu" icon-aurora="f7:menu" icon-md="material:menu" panel-open="right"></f7-link>
      </f7-nav-right>
      <f7-nav-title-large>My App</f7-nav-title-large>
    </f7-navbar>
    <!-- Toolbar-->
    <f7-toolbar bottom>
      <f7-link>Left Link</f7-link>
      <f7-link>Right Link</f7-link>
    </f7-toolbar>
    <!-- Page content-->
    <f7-block strong>
      <p>Here is your blank Framework7 app. Let's see what we have here.</p>
    </f7-block>
    <f7-block-title>Navigation</f7-block-title>
    <f7-list>
      <f7-list-item link="/about/" title="About"></f7-list-item>
    </f7-list>
    </f7-page>
    </f7-view>
  </f7-app>
</div>

CSS

.messages {
  height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top) + var(--f7-messagebar-height)));
  overflow-y: scroll;
}

JavaScript

// Init F7 Vue Plugin
const arrData = []
for (let i = 0; i < 6000; i++) arrData.push({
  id: i,
  desc: 'Element: ' + i
})
Framework7.use(Framework7Vue)
Vue.component('About', {
  data: function() {
    return {
      startTime: -1,
      endTime: -1,
      ssData: [],
      ss: null
    }
  },
  methods: {
    initSS() {
      this.$f7.smartSelect.create({
        el: '.my-ss',
        virtualList: true,
        openIn: 'sheet'
      })
    },
    addData() {
      this.startTime = moment().format('hh:mm:ss')
      this.ssData = arrData
      this.$nextTick(() => {
        this.endTime = moment().format('hh:mm:ss')

      })
    }
  },
  template: `
  <f7-page name="about" @page:beforein='initSS'>
    <f7-navbar title="About" back-link="Back"></f7-navbar>
    <div class="block">
    <div class="row">
    	<span class='col'>Start: {{startTime}}</span>
      <span class='col'>End: {{endTime}}</span>
      </div>
      <div class="row">
      <button class="button col button-fill" @click='addData'>Add Data</button>
    </div>
  </div>
    <div class="list">
      <ul>
        <li>
          <a class="item-link smart-select my-ss">
            <select name="fruits">
              <option v-for="item in ssData" :key="item.id">{{
                item.desc
              }}</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Fruit</div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </f7-page>
`
})
new Vue({
  el: '#app',
  mounted() {},
  data: function() {
    return {
      messages: null,
      f7params: {
        root: '#app',
        id: 'io.framework7.testapp',
        name: 'Framework7',
        theme: 'ios',
        view: {
          stackPages: false,
          allowDuplicateUrls: false
        },
        routes: [{
            path: '/about/',
            component: 'about'
          },
          {
            path:...