F7-V4 + Vue Starter - Swipe Wizzard

by Maiki Nahara

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.2.2/css/framework7.bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.2.2/js/framework7.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/framework7-vue.bundle.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <f7-statusbar></f7-statusbar>

    <!-- Main View -->
    <f7-view id="main-view" main class="safe-areas">
      <f7-page>
        <f7-navbar>
          <f7-nav-left>
            <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left"></f7-link>
          </f7-nav-left>
          <f7-nav-title>My App</f7-nav-title>
          <f7-nav-right>
            <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right"></f7-link>
          </f7-nav-right>
        </f7-navbar>
        <f7-list>
          <f7-list-item link="/swipe-wizzard/" title="Swipe Wizzard"></f7-list-item>
        </f7-list>
      </f7-page>
    </f7-view>
  </f7-app>
</div>

<!-- Page 1 Template -->
<template id="swipe-wizzard">
  <f7-page>
    <f7-navbar title="Swipe Wizzard" back-link="Back"></f7-navbar>
    <div class="swiper-container my-swiper">
    <!-- Slides wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
          <f7-list>

  <f7-list-item title="Car" smart-select :smart-select-params="{openIn: 'sheet', closeOnSelect: true}">
    <select name="fruits">
      <option value="apple" selected>Apple</option>
      <option value="pineapple">Pineapple</option>
      <option value="pear">Pear</option>
      <option value="orange">Orange</option>
      <option value="melon">Melon</option>
      <option value="peach">Peach</option>
      <option value="banana">Banana</option>
    </select>
  </f7-list-item>
  </f7-list>
        </div>
        <div class="swiper-slide">
              ...

CSS

.my-swiper .swiper-slide {
  font-size: 25px;
  font-weight: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #000;
}

.my-swiper .swiper-slide {
  box-sizing: border-box;
  border: 1px solid #ddd;
  background: #fff;
}

.my-swiper {
  margin: 0px 0 35px;
  font-size: 18px;
  height: 80%;
}

.my-swiper .list {
  width: 80%;
}

JavaScript

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

// Init Page Components
Vue.component('swipe-wizzard', {
  template: '#swipe-wizzard',
  data() {
    return {
      mySwiper: null
    }
  },
  mounted() {
    this.mySwiper = this.$f7.swiper.create('.swiper-container', {
      speed: 400,
      init: true,
      spaceBetween: 100,
      on: {
          init: s => {
          },
          reachEnd: s => {
				}
      },
      navigation: {
        nextEl: '.button-next',
        prevEl: '.button-prev'
      }
    })
    this.mySwiper.init()
  },
  methods: {}
});

Vue.component('page-not-found', {
  template: '#page-not-found'
});

// Init App
new Vue({
  el: '#app',
  data: function() {
    return {
      f7params: {
        root: '#app',
        id: 'io.framework7.testapp',
        name: 'Framework7',
        theme: 'ios',
        view: {
          stackPages: false,
          allowDuplicateUrls: false
        },
        routes: [{
            path: '/swipe-wizzard/',
            component: 'swipe-wizzard'
          },
          {
            path: '(.*)',
            component: 'page-not-found',
          },
        ],
      }
    }
  },
});