Vue で WeChat のようなボトム メニューを実装するにはどうすればよいですか?

最近の Web アプリケーションでは、下部のメニューがナビゲーションや操作のメイン エントリとしてよく使用されます。 WeChat は人気のあるモバイル アプリケーションであり、その下部メニューのデザインは幅広い注目と愛を集めています。

Vue は、最新の Web アプリケーション開発用の JavaScript フレームワークです。これは、再利用可能なコンポーネントを使用して高品質のアプリケーションを構築するためのシンプルかつ直感的な方法を提供します。この記事では、Vueを使ってWeChat風のボトムメニューを実装する方法を紹介します。

ステップ 1: Vue プロジェクトを作成する

始める前に、まず Vue プロジェクトを作成する必要があります。コマンド ラインにコマンド

vue create wechat-menu

を入力し、プロンプトに従って構成します。その中で、「機能を手動で選択する」オプションを選択し、「Babel」と「Router」を選択し、他のすべてのオプションをスキップします。これにより、Babel サポートと Vue ルーターを備えたプロジェクトが作成されます。

ステップ 2: ルーターのセットアップ

Vue ルーターを使用すると、すべてのページの読み込みとレンダリングが同じページ内で行われるシングル ページ アプリケーション (SPA) を作成できます。私たちのプロジェクトでは、ルーターを使用して下部メニューのさまざまなビューを定義および管理する必要があります。

まず、/src/router/index.js ファイルを開き、デフォルトのルーター コードを削除して、次のコードに置き換えます。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Profile from '@/views/Profile.vue'
import Settings from '@/views/Settings.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile
  },
  {
    path: '/settings',
    name: 'Settings',
    component: Settings
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

上記のコードでは、まず Vue をインポートし、 VueRouter、Vue.use() メソッドを使用してルーターを導入します。次に、Home、Profile、Settings という 3 つのルートが定義され、それぞれにパスと対応するコンポーネントが指定されます。 / パスはホーム パス、/profile パスはプロファイル パス、/settings パスは設定パスに設定されます。

次に、ルーター構成オプションで、モード オプションを値「history」とともに使用します。これにより、HTML5 モードが有効になり、「#」 URL をハッシュせずにルート状態管理を使用できるようになります。基本オプションでは、ルーターのベース URL パスを設定します。

最後に、VueRouter をインスタンス化してエクスポートします。これにより、その API をアプリケーションの他のコンポーネントで使用できるようになります。

ステップ 3: ボトム メニュー コンポーネントを作成する

次に、定義した 3 つのルートに対応する 3 つのボタンを含むボトム メニュー コンポーネントを作成します。

まず、新しい Vue コンポーネントを作成する必要があります。 /src/components/ ディレクトリに、BottomMenu.vue という名前のファイルを作成します。ファイルの初期コンテンツは次のとおりです。

<template>
  <div class="bottom-menu">
    <router-link to="/" class="bottom-menu-item">
      <i class="fas fa-home"></i>
    </router-link>
    <router-link to="/profile" class="bottom-menu-item">
      <i class="fas fa-user"></i>
    </router-link>
    <router-link to="/settings" class="bottom-menu-item">
      <i class="fas fa-cog"></i>
    </router-link>
  </div>
</template>

<script>
export default {}
</script>

<style>
.bottom-menu {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  padding: 10px;
  box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.1);
}

.bottom-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #777;
}

.bottom-menu-item i {
  font-size: 24px;
  margin-bottom: 5px;
}
</style>

上記のコードでは、ルート ナビゲーションを提供する 3 つの router-link 要素を含む div 要素を最初に定義します。各ルーターリンクには to 属性があり、定義したルーティング パスに対応するコンポーネントを指します。

次に、ボトム メニューの外観を美しくするために、ボトム メニュー クラスとボトム メニュー項目クラスのスタイルを設定します。このうち、.bottom-menu は flex レイアウトを使用して、ボトムメニューの背景色、塗りつぶし、ボックスの影を設定します。 Bottom-menu-item クラスは、その子要素のスタイル プロパティを定義します。

ステップ 4: ボトム メニュー コンポーネントをルート コンポーネントに追加する

ボトム バー コンポーネントを作成してルーターを設定したので、次にボトム バー コンポーネントをルート コンポーネントに追加する必要があります。アプリケーションで。

まず、/src/views/Home.vue ファイルを開きます。次のコードを追加します。

<template>
  <div class="home">
    <h1>Home</h1>
    <BottomMenu />
  </div>
</template>

<script>
import BottomMenu from '../components/BottomMenu.vue';

export default {
  name: 'Home',
  components: {
    BottomMenu
  }
};
</script>

<style>
.home {
  text-align: center;
}
</style>

上記のコードでは、最初に BottomMenu コンポーネントをインポートし、それを現在のコンポーネントのコンポーネント プロパティに追加しました。次に、テンプレート内の BottomMenu コンポーネントを使用して、ページの下部に配置します。

次に、上記の手順を繰り返し、BottomMenu コンポーネントを /src/views/Profile.vue および /src/views/Settings.vue に追加します。そして、WeChatの下部メニューを模したVueアプリが完成しました！

これは、Vue を使用して WeChat のようなボトム メニューを実装する方法に関する完全な手順です。その過程で、Vue Router を使用して下部メニューのさまざまなビューのナビゲーションを管理し、メニュー自体をレンダリングするための新しい Vue コンポーネントを作成しました。最後に、下部のメニュー コンポーネントをアプリケーションの各ビューに追加して、すべてのページに表示されるようにします。

以上がVue で WeChat のようなボトム メニューを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。