Vue.jsでAndroidのタブをシュミュレーションする「vue-swipe-tab-layout」

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/swipe-tab-layout.min.js"></script>
<div id="app">
  <swipe-tab-container
    owner="app"
    :current-tab-index.sync="currentTabIndex"
    :tab-nav-list="tabNavList"
    :indicator-width-scale-factor="0.27"
    :full-flex="true"
  >
  <template
    v-for="(tabNav, index) in tabNavList"
    :slot="`swipe-tab-nav-${tabNav.key}`">
    <div class="nav-item">{{ tabNav.label }}</div>
  </template>
  <template :slot="`swipe-tab-content-left`">
    <div>
      <h1>タブ1 コンテンツ</h1>
    </div>
  </template>
  <template :slot="`swipe-tab-content-center`">
    <div>
      <h1>タブ2 コンテンツ</h1>
    </div>
  </template>
  <template :slot="`swipe-tab-content-right`">
    <div>
      <h1>タブ3 コンテンツ</h1>
    </div>
  </template>
  </swipe-tab-container>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

h2 {
  font-size: 130%;
}
html, body {
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.nav-item--wrapper{
  border-right: 1px solid #f5f5f5;
}
.nav-item--wrapper .nav-item{
  text-align: center;
  font-weight: bold;
  padding-top: 2%;
  cursor: pointer;
}
.swipe-tab-content--slider {
  padding: 1rem;
}

Vue

const SwipeTabContainer = window['PwdInputs'].SwipeTabContainer;

new Vue({
  el: '#app',
  components: {
    'swipe-tab-container': SwipeTabContainer,
  },
  data: function(){
    return {
      currentTabIndex: 0,
      tabNavList: [
        {
          label: 'タブ1',
          key: 'left',
          type: 0,
        },
        {
          label: 'タブ2',
          key: 'center',
          type: 1,
        },
        {
          label: 'タブ3',
          key: 'right',
          type: 2,
        },
      ]
    }
  },
});