WeChat アプレットのカスタム下部ナビゲーションバーコンポーネント

この記事の例では、WeChatアプレットの下部ナビゲーションバーコンポーネントの具体的な実装コードを参考までに共有しています。具体的な内容は次のとおりです。

1. 独自のプロジェクトのパブリックコンポーネントのファイル価格の下に、新しいtabbar.vue（定義されたカスタムナビゲーションバーコンポーネント）を作成します。

<テンプレート>
  <view v-if="showTabbar" class="tabbar">
    <表示
      v-for="(item, index) in tabList"
      :key="インデックス"
      クラス="アイコン"
      @click="switchTabBar(item.path, index)"
    >
      <image :src="index == 現在の ? item.iconActivePath : item.iconPath"></image>
      <text :class="index == current ? 'active_text' : 'text'" bindtap = 'go'>{{ item.name }}</text>
    </ビュー>
  </ビュー>
</テンプレート>
 
<スクリプト>
  // '@/channelMessage/get-container' からコンテナをインポートします
 
  エクスポートデフォルト{
    小道具: {
      タブバーを表示: {
        タイプ: ブール値、
        デフォルト: true、
      },
      current:{ // 現在のページインデックス
    タイプ:数値、
    デフォルト:0
   },
    },
    データ（） {
      戻る {
        選択されたインデックス: 0,
        タブリスト: [
          {
            名前: "ホーム",
            アイコンパス: require("../../../static/image/img/tab-home-nor.png"),
            iconActivePath: require("../../../static/image/img/tab-home-sel.png"),
          パス: "/pages/index/index",
          },
          {
            名前:「ショッピングカート」
            アイコンパス: require("../../../static/image/img/tab-cart-nor.png"),
            iconActivePath: require("../../../static/image/img/tab-cart-sel.png"),
            パス: "/pages/cart/cartEdit",
          },
          {
            名前: 「私の」
            アイコンパス: require("../../../static/image/img/tab-my-nor.png"),
            iconActivePath: require("../../../static/image/img/tab-my-sel.png"),
            パス: "/pages/mine/mine",
          },
        ]、
    }
    },
 
    オンショー() {
      // 定数コンテナId = container.getContainerId()
      // コンテナID == '1000'の場合{
      // this.showTabbar = false
      // }
    },
    メソッド: {
    switchTabBar(パス、インデックス) {
      this.item_index = インデックス
      wx.switchTab({
          url: パス、
      })
        // this.$router.replace(パス)
      },
    
    },
}
</スクリプト>
 
<style lang="scss" スコープ>
  .タブバー{
    位置: 固定;
    下部: 0;
    zインデックス: 10;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの両端揃え: スペースを空ける;
    幅: 100%;
    高さ: 100rpx;
    背景色: #ffffff;
    パディング下部: 定数(セーフエリアインセット下部);
    パディング下部: env(セーフエリアインセット下部);
 
    .アイコン {
      ディスプレイ: フレックス;
      flex-direction: 列;
      アイテムの位置を中央揃えにします。
 
      画像 {
        幅: 50rpx;
        高さ: 50rpx;
      }
  }
  .active_text{
        フォントサイズ: 20rpx;
        上マージン: 5rpx;
    色: #d81e06;
      }
  。文章{
    フォントサイズ: 20rpx;
    上マージン: 5rpx;
    }
  }
</スタイル>

2. プロジェクトの pages.json ファイルにコードを追加して、tabbar.vue の wx.switchTab が正常に使用できることを確認します。コードは次のとおりです。

"タブバー": {
    "選択された色": "#EE2F51",
    「リスト」: [{
      "ページパス": "ページ/インデックス/インデックス",
      "テキスト": "ホーム",
      "アイコンパス": "static/image/img/tab-home-nor.png",
      "選択されたアイコンパス": "static/image/img/tab-home-sel.png"
    },{
      "pagePath": "pages/cart/cartEdit",
      "text": "ショッピングカート",
      "アイコンパス": "static/image/img/tab-cart-nor.png",
      "selectedIconPath": "static/image/img/tab-cart-sel.png"
    },{
      "pagePath": "pages/mine/mine",
      "テキスト": "私の",
      "アイコンパス": "static/image/img/tab-my-nor.png",
      "選択されたアイコンパス": "static/image/img/tab-my-sel.png"
    }]
  },

3. main.js にカスタムコンポーネントをグローバルに登録する

「./customComponents/commonComponents/tabBar/index.vue」からtabBarをインポートします。

//コンポーネントの位置を変更します。ここでのindex.vueは前述のtabbar.vueです。
Vue.component("タブバー", タブバー);

4. ナビゲーションバーが必要なページに、登録したコンポーネントを導入する

// ページにナビゲーション バー コンポーネントを導入します <tabBar :current=item_index></tabBar>
 
//ステータスをマークします。ナビゲーションバーはページデータに応じて異なるアクティベーションステータスを表示できます。
      戻る {
        アイテムインデックス: 0,
      }
}
 
//WeChatの組み込みナビゲーションバーを非表示にする onLoad() {
      タブバーを非表示にする
},

5. 表示効果