vant コンポーネント van-tabbar は下部ナビゲーションを実装します

van-tabbar を使用してボトムナビゲーションを実装するだけです

モバイル端末初心者で初めてモバイル H5 開発に挑戦しましたが、vant2 の van-tabbar を利用してボトムナビゲーション機能を実装しました。この記事では、vant を使用する手順を無視し、プロジェクト内でグローバル参照を使用します。多くの記事に問い合わせがあり、複雑すぎたり、実装されていない機能もあるので、簡単に整理しましたが、質問がある場合はメッセージを残して修正してください。

1. 下部ナビゲーションコンポーネントを作成します。

下部のナビゲーション バーは実装が簡単ですが、使用する必要があるすべてのページでコンポーネントを参照する必要があることに注意してください。したがって、下部のナビゲーション バーを結合してコンポーネントにカプセル化します。

// Tabbar组件
<template>
  <div>
  <router-view></router-view>
  <van-tabbar v-model="tabbarTempValue" route >
    <van-tabbar-item name="news" icon="home-o"  replace to="/news">资讯待办</van-tabbar-item>
    <van-tabbar-item name="workBench" icon="friends-o" replace to="/workBench">工作台</van-tabbar-item>
    <van-tabbar-item name="setting" icon="setting-o" replace to="/setting">我的</van-tabbar-item>
  </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'tabbar',
  props: {
    active: Number
  },
  data () {
    return {
      tabbarTempValue: this.active
    }
  },
  methods: {
  }
}
</script>

<style scoped>

</style>

2. サブページ参照

// news页面
<template>
  <div>
    我是news
    <Tabbar :active=0 />
  </div>

</template>

<script>
import Tabbar from './tabbar'
export default {
  name: "news",
  components: {
    Tabbar
  },
  data () {
    return {}
  }
}
</script>

<style scoped>

</style>

バンタブバーの使用を最適化する

上記の方法でもボトムナビゲーションの機能は実現できますが、少々無理があります。新しいアイデアは、van-tabbar を使用してメイン ページを作成し、ルーティング モードをオンにし、ルーティング階層と連携してボトム ナビゲーション効果を実現するというもので、完全なメイン コードは次のとおりです。

1. メインページを作成する

// homePage页面主页代码
<router-view />
    <van-tabbar class="layout-tabbar" route  >
      <van-tabbar-item name="news" icon="home-o"  :to="{name: 'news'}">资讯</van-tabbar-item>
      <van-tabbar-item name="workBench" icon="friends-o"   :to="{name : 'workBench'}">工作台</van-tabbar-item>
      <van-tabbar-item name="setting" icon="setting-o"   :to="{name : 'setting'}">设置</van-tabbar-item>
    </van-tabbar>

2. サブモジュールの作成

   子模块代码没有限制

3. ルーティングを構成する (非常に重要)

{path: '/',
  component: _import('modules/mobile/homePage'),
  children: [
    {
      path: '', // 默认子路由
      name: 'news',
      component: _import('modules/mobile/news')
    },
    {
      path: '/setting', // 设置
      name: 'setting',
      component: _import('modules/mobile/setting')
    },
    {
      path: '/workBench', // 工作台
      name: 'workBench',
      component: _import('modules/mobile/workBench')
    }
  ]

4. まとめ

ルーティングでサブルートを構成し、バンタブ ルーティング モードをオンにすると、ボトム ナビゲーションの効果を得ることができます。なお、van-tabbar の to を to="/setting" モードで直接記述すると、ホームページが常に強調表示されます（理由は不明ですが、メッセージを残してください）。