WeChat アプレットカスタムタブバーステップ記録

1. はじめに

多くの場合、ミニプログラムに付属する tabBar はプロジェクトの要件を満たせないため、tabBar をカスタマイズする必要があります。しかし、インターネットで長い間検索した結果、私が見つけた問題のほとんどは、切り替え時のちらつきでした。幸いなことに、ベース ライブラリ 2.5.0 以降では、カスタム tabBar を正式に使用できます。

2. タブバーのスタイルをカスタマイズする

下の図に示すように、「ホーム」、「マイ」、およびクリックしてリリースにジャンプできるページを表示するタブバーが必要です。このスタイルは、ネイティブのスタイルではニーズを満たすことができないため、タブバーをカスタマイズすることしかできません。

3. カスタムタブバーと関連設定を導入する

3.1. 下の図のように、custom-tab-bar [Download] をプロジェクトのルートディレクトリにインポートします。

3.2. app.json で切り替えタブバーを設定し、"custom": true に設定してから、ベースライブラリを 2.5.0 に設定します。

3.3. カスタム TabBar を使用し、切り替えられた TabBar インターフェースの onShow に次のコードを追加します。たとえば、ホームページでは「selected: 0」が設定され、私のページでは「selected: 2」が設定されています。 selected: 1 は特別なジャンプなので、プラスアイコンをクリックしてもタブバーが切り替わらず、直接公開インターフェースにジャンプします。

/**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数() {
    if (typeof this.getTabBar === 'function' &&
      タブバーを取得する
      console.log('選択した項目0を設定')
      this.getTabBar().setData({
        選択: 0
      })
    }
  },

4. デモを完了する

実機テストも可能で、非常に使いやすいです。 【完全版デモダウンロードアドレス】

要約する

WeChatミニプログラムのタブバーをカスタマイズする方法についての記事はこれで終わりです。ミニプログラムのタブバーをカスタマイズする関連コンテンツの詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。