WeChat アプレットの下部ナビゲーション バーをカスタマイズする方法を段階的に説明します。

WeChat アプレットの下部ナビゲーション バーをカスタマイズするにはどうすればよいですか?下部ナビゲーションバーのカスタマイズの具体的な実装方法は以下の記事で紹介していますので、ご参考になれば幸いです！

WeChat は、柔軟な下部ナビゲーション バーを実現するためのカスタム ナビゲーション バーをサポートしています。公式ドキュメントに簡単な説明が記載されていますが、あまり具体的ではありません。特定のコードを段階的に実装することで、下部ナビゲーション バーのカスタマイズの特定の実装を完了できるように支援します。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル ]

colorui の紹介

https://github.com/weilanwl/ColorUI

この URL にアクセスして、colorui コンポーネント ライブラリをダウンロードします。

ダウンロード後、デモ フォルダー内の colorui フォルダーをアプレットのプロジェクトに配置します

設定の紹介

@import 'colorui/main.wxss';
@import 'colorui/icon.wxss';
@import 'colorui/animation.wxss';

上記のコードを app.wxss ファイルに入力します (記入してください)実際のパスに応じた上記のコード パス)

colorui が正常に導入されました。ここでは colorui のスタイル コンポーネントを使用しています。実際、他の用途にも同じことが当てはまります。または、次のように書くこともできますボトム ナビゲーション バーは自分で作成できます。任意のスタイルを使用できます。

カスタム ボトム ナビゲーション バー コンポーネントを作成します

最初にカスタム コンポーネント フォルダーを作成します **custom-tab-bar, **カスタム下部ナビゲーション バー フォルダー名はこれである必要があり、他の名前に変更することはできません。変更しない場合、アプレットは認識されません。

次に、[ページ] の下に 2 つのページ (home、my) を作成します。これらは、ナビゲーション バーの 2 つの切り替えページとして使用されます。

app.json ファイル設定

ミニ プログラムのデフォルトのナビゲーション バー設定を使用しない場合は、tabBar のカスタム属性をapp.json ファイル。trueの場合

具体的なコードは次のとおりです:

"tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/icon/basics.png",
        "selectedIconPath": "images/icon/basics_cur.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/icon/component.png",
        "selectedIconPath": "images/icon/component_cur.png"
      }
    ]
  },

ここではリストも設定する必要があることに注意してください。リスト内のpagePathは、特定の設定する必要があるタブ ページです。ここでは設定するだけです。タブが 2 つあるので、2 つ設定されています。いくつかのタブを設定した後、ここでいくつか設定します。不足しているものはありません。pagePath に加えて、リスト内の他のフィールドも増やすことができますまたは自分のニーズに応じて減らします。

ナビゲーション バーの特定のコード ロジックを作成します

ナビゲーション バー コンポーネントの特定の実装

1. 初期コンポーネントのデータ設定

**// custome-tab-bar/index.js**
/**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    list: [{
        "pagePath": "/pages/home/home",
        "text": "首页",
        "iconPath": "/images/icon/basics.png",
        "selectedIconPath": "/images/icon/basics_cur.png"
      },
      {
        "pagePath": "/pages/my/my",
        "text": "我的",
        "iconPath": "/images/icon/component.png",
        "selectedIconPath": "/images/icon/component_cur.png"
      }
    ]
  }

ここでapp.jsonとほぼ同じ設定になっていることがわかりますが、実際のリストデータはapp.jsonではなくここで取得されます。カスタム コンポーネントを実装するので、皆さん app.json が使用されていないのに、なぜ app.json に設定する必要があるのか​​と疑問があるかもしれません? ここで確認したところ、これはミニ プログラムの標準要件であり、できることはこれだけですそれに従う。

2. コンポーネント ナビゲーション バー ページ コードの実装

<!--custom-tab-bar/index.wxml-->
<view class="cu-bar tabbar">
  <view wx:for="{{list}}" wx:key="index" class="action" data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">
    <view class="cuIcon-cu-image">
      <image ></image>
    </view>
    <view class="text-green">{{item.text}}</view>
  </view>
</view>

使用する colorui スタイルは、リスト内の各データのインデックス ビットと選択した値を比較して、ボタン スタイルを作成します。効果として、switchTab 切り替えイベントを通じてタブ ページの切り替えを実現します。

3. コンポーネント切り替えイベントコードの実装

/**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
    
      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    }
  }

WeChat が提供する wx.switchTab メソッドを呼び出して URL ジャンプを完了し、そのときに選択されたインデックス値を記録します。

コンポーネントのコードはここに記述されており、特定のページでもボタン切り替えに対応するロジックを設定する必要があります

4. タブ固有のページ コードの実装

// pages/my/my.js
/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onShow")
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1
      })
    }
  },

onShow のページ ライフ サイクル関数を通じて selected の値を設定します。私のページは 2 番目のタブであるため、インデックス値は 1 に設定されます。カスタム コンポーネント WeChat には新しい getTabBar インターフェイスがあり、カスタム tabBar を取得できます。現在のページ。コンポーネント インスタンスでは、選択した値をコンポーネントに設定できます。ホームページにも同じ設定があり、実際の状況に応じてインデックス値をジャンプできます。

最終効果のプレゼンテーション

上記のコードの実装により、カスタムの下部ナビゲーション バー全体が実現されます。実際、全体の実装は比較的単純です。効果を見てみましょう

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！

以上がWeChat アプレットの下部ナビゲーション バーをカスタマイズする方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。