【Vue.js】Vue.js/Webpack/Cordovaでアプリ開発 - 改造1 -【Vue.js/Webpack/Cordova】

【Vue.js】Vue.js/Webpack/Cordovaでアプリ開発 - 改造1 -【Vue.js/Webpack/Cordova】

前回はサンプルコードの動作確認までしたが、今回はそれを自分好みに修正していく。
www.sky-limit-future.com

■修正点

f7-panelの修正

新規ページの作成

新規ページへのrouter設定

もっとやりたいことはあるけど、今日はこの3つくらい。

f7-panelの修正

サンプルだと、ツールバーの左右両方にナビゲーションがあるが、これを一つにする。
Framework7を初めて使うので、どのように実装していけばいいのかも見ていく。

削除

ツールバーのナビゲーションは右上だけ残して、左は削除する。
これは消すだけなので、簡単。
main.vueの以下の箇所を削除。

・と記載のあるブロック。

・open-panel="left"の記載がある要素。

panelの動作

■panelを開く方法
どのようにパネルを開いているのか確認する。
イベントを呼び出している箇所は

<f7-link icon="icon-bars" open-panel="right"></f7-link>

<f7-button open-panel="right">Right Panel</f7-button>

このように

open-panel="right"

とつければいい。ここで「right」はpanelを定義している以下の箇所の、一番上の要素「f7-panel」にある「right」を指している。

<!-- Right Panel -->
<f7-panel right cover layout="dark">
  <f7-view id="right-panel-view" navbar-through :dynamic-navbar="true">
    <f7-navbar title="Right Panel" sliding></f7-navbar>
    <f7-pages>
      <f7-page>
        <f7-block>
          <p>Right panel content goes here</p>
        </f7-block>
        <f7-block-title>Load page in panel</f7-block-title>
        <f7-list>
          <f7-list-item link="/about/" title="About"></f7-list-item>
          <f7-list-item link="/form/" title="Form"></f7-list-item>
        </f7-list>
        <f7-block-title>Load page in main view</f7-block-title>
        <f7-list>
          <f7-list-item link="/about/" title="About" link-view="#main-view" link-close-panel></f7-list-item>
          <f7-list-item link="/form/" title="Form" link-view="#main-view" link-close-panel></f7-list-item>
        </f7-list>
      </f7-page>
    </f7-pages>
  </f7-view>
</f7-panel>

以下のように名前を変えた場合

<f7-panel right-panel cover layout="dark">

open-panel="right-panel"

とすればいい。

■panelのアニメーション
それからサンプルの左右のナビゲーションを開くと、挙動が異なるのが分かると思う。
これは上記の「right」の後ろに記載されされている、「cover」が効いている。

<!-- Right Panel -->
<f7-panel right cover layout="dark">

サンプルの左パネルには「reveal」の記載がある。

<f7-panel left reveal layout="dark">

cover → 現在の画面に被さるように開く
reveal → 現在の画面を押しのけるように開く

アニメーションはこの2種類のみ。
どっちがいいか迷う（どっちでもいい）けど、revealの方がpanelを閉じるときのアクションが分かりやすそうだから、revealにする。

<!-- Right Panel -->
<f7-panel right reveal layout="dark">
  <!-- 省略 -->
</f7-panel>

次に作成するページのためのナビゲーションを追加しておく。
メインページはいじらずに、右パネルの方だけに追加。

<!-- Right Panel -->
<f7-panel right reveal layout="dark">
  <f7-view id="right-panel-view" navbar-through :dynamic-navbar="true">
    <f7-navbar title="Right Panel" sliding></f7-navbar>
    <f7-pages>
      <f7-page>
        <f7-block>
          <p>Right panel content goes here</p>
        </f7-block>
        <f7-block-title>Load page in panel</f7-block-title>
        <f7-list>
          <f7-list-item link="/about/" title="About"></f7-list-item>
          <f7-list-item link="/form/" title="Form"></f7-list-item>
          <!-- リンク追加 -->
          <f7-list-item link="/money/" title="お金"></f7-list-item>
          <f7-list-item link="/baby/" title="妊活"></f7-list-item>
          <f7-list-item link="/home/" title="住居"></f7-list-item>
          <f7-list-item link="/insurance/" title="保険"></f7-list-item>
        </f7-list>
        <f7-block-title>Load page in main view</f7-block-title>
        <f7-list>
          <f7-list-item link="/about/" title="About" link-view="#main-view" link-close-panel></f7-list-item>
          <f7-list-item link="/form/" title="Form" link-view="#main-view" link-close-panel></f7-list-item>
        </f7-list>
      </f7-page>
    </f7-pages>
  </f7-view>
</f7-panel>

新規ページの作成

中身は適当に、必要なページの元となるものを作る。
今回は以下の4ページ。

money.vue

<template>
	<f7-page>
		<f7-navbar title="お金" back-link="Back" sliding></f7-navbar>
		<f7-block inner>
			<p>Here is Money page!</p>
		</f7-block>
	</f7-page>
</template>

<script>
	export default {}
</script>

■baby.vue

<template>
	<f7-page>
		<f7-navbar title="妊活" back-link="Back" sliding></f7-navbar>
		<f7-block inner>
			<p>Here is Baby page!</p>
		</f7-block>
	</f7-page>
</template>

<script>
	export default {}
</script>

■home.vue

<template>
	<f7-page>
		<f7-navbar title="住居" back-link="Back" sliding></f7-navbar>
		<f7-block inner>
			<p>Here is MyHome page!</p>
		</f7-block>
	</f7-page>
</template>

<script>
	export default {}
</script>

■insurance.vue

<template>
	<f7-page>
		<f7-navbar title="保険" back-link="Back" sliding></f7-navbar>
		<f7-block inner>
			<p>Here is Insurance page!</p>
		</f7-block>
	</f7-page>
</template>

<script>
	export default {}
</script>

新規ページへのrouter設定

上記で、ページとそのページへのリンクを作成したけど、このままだと思った通りのページを表示できない。
ページを表示させるためには、routes.jsを修正する必要がある。

export default [
  {
    path: '/about/',
    component: require('./assets/vue/pages/about.vue')
  },
  {
    path: '/form/',
    component: require('./assets/vue/pages/form.vue')
  },
  {
    path: '/dynamic-route/blog/:blogId/post/:postId/',
    component: require('./assets/vue/pages/dynamic-route.vue')
  },
  {
    path: '/money/',
    component: require('./assets/vue/pages/money.vue')
  },
  {
    path: '/baby/',
    component: require('./assets/vue/pages/baby.vue')
  },
  {
    path: '/home/',
    component: require('./assets/vue/pages/home.vue')
  },
  {
    path: '/insurance/',
    component: require('./assets/vue/pages/insurance.vue')
  },
]

下の4つ追加した。
これで、ページ表示までできる。
サンプルのディレクトリ構成のままであれば、パスとファイル名を修正すればいける。
ディレクトリ構成が異なる場合は、componentの箇所を実装に合わせる。