WeChat アプレットのカスタム タブバー コンポーネント

WeChat アプレットのカスタム タブバー コンポーネント

この記事では、WeChatアプレットのカスタムタブバーコンポーネントの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

プロジェクトの要件により、独自のコンポーネントを作成する必要があります。

ステップ 1: App.json で tabBar を構成します。カスタム コンポーネントも構成する必要があります。"custom": true、リスト内のすべてのタブバー ページを構成します。

 "タブバー": {
 「カスタム」:true、
 "色": "赤",
 "選択された色": "#3b81d7",
 "背景色": "#000000",
 「リスト」: [{
 "pagePath": "pages/Role/InsureIndex/index",
 "テキスト": "ホーム"
 }, {
 "pagePath": "pages/Role/MineIndex/index",
 "テキスト": "ホーム"
 }, {
 "pagePath": "pages/index/userInfo/userInfo",
 "テキスト": "私の"
 }]
 },

ステップ 2:ページと同じディレクトリに新しいコンポーネントを作成します。フォルダー名は custom-tab-bar、カスタム コンポーネント ファイル名は index です。コンポーネントコードは以下のとおりです。理解できるはずです。

インデックス

成分({
 プロパティ: {},
 
 データ: {
 インデックス画像: "../static/images/tabBar/[email protected]",
 インデックス選択画像: "../static/images/tabBar/[email protected]",
 aboutUsImg: "../static/images/tabBar/[email protected]",
 aboutUsSelectImg: "../static/images/tabBar/[email protected]",
 _tabbat: ヌル、
 iPhoneX: 誤り、
 URL: ['/pages/Role/InsureIndex/index',
 '/pages/index/userInfo/userInfo'
 ]
 },
 添付() {
 var 自己 = これ
//これはビジネスコードなので、wx.getStorage({ を見る必要はありません。
 キー: 'userInfo',
 成功: 関数 (res) {
 定数{
  ユーザーロールコード
 } = res.データ
 (ユーザーロールコード == '50' || ユーザーロールコード == '70') {
  自己.setData({
  ["urls[0]"]: '/pages/Role/MineIndex/index'
  })
 } そうでない場合 (userRoleCode == '30' || userRoleCode == '35' || userRoleCode == '40') {
  自己.setData({
  ["urls[0]"]: '/pages/Role/InsureIndex/index'
  })
 }
 }
 })
 wx.getSystemInfo({
 成功(res) {
 コンソールログ(res.model)
 res.model.indexOf('iPhone X') >= 0 の場合 {
  自己.setData({
  iPhoneX: 本当
  })
 }
 }
 })
 },
 /**
 * コンポーネントメソッドのリスト */
 メソッド: {
 スイッチタップ: 関数(e) {
 var 自己 = これ
 var インデックス = e.currentTarget.dataset.index;
 var urls = self.data.urls
 wx.switchTab({
 url: urls[インデックス],
 })
 }
 }
})

インデックス.wxml

<div class="_tabbar {{iPhoneX?'_iPhoneX':''}}">
 <div class="titem {{_tabbat==0?'tCdk':''}}" data-index="0" bind:tap="switchTap">
 <画像 src="{{_tabbat==0?indexSelectImg:indexImg}}" />
 <b>ホーム</b>
 </div>
 <div class="titem {{_tabbat==1?'tCdk':''}}" data-index="1" bind:tap="switchTap">
 <画像 src="{{_tabbat==1?aboutUsSelectImg:aboutUsImg}}" />
 <b>私の</b>
 </div>
</div>

インデックス.wxss

._タブバー{
 幅: 100%;
 高さ: 120rpx;
 ディスプレイ: フレックス;
 アイテムの位置を中央揃えにします。
 背景: #fff;
 フォントサイズ: 26rpx;
 色: #999999;
 ボックスの影: 0px -7rpx 13rpx 0px rgba(193, 185, 204, 0.13);
}
 
._タブバー .titem {
 テキスト配置: 中央;
 幅: 50%;
}
 
._tabbar .titem イメージ {
 表示: ブロック;
 マージン: 自動;
 幅: 48rpx;
 高さ: 48rpx;
 下部マージン: 10rpx;
}
 
._タブバー .tCdk {
 色: #37ADFE;
}
 
._iPhoneX {
 高さ: 148rpx;
}

インデックス

{
 「コンポーネント」:true、
 "コンポーネントの使用": {}
}

上記はコンポーネント コードです。タブバーをクリックしてページにジャンプすると、タブバー コンポーネントが再読み込みされ、選択したスタイルが常にデフォルトになります。そのため、タブバーを使用するページの js ファイルで次の操作を行う必要があります。(「ホーム」ページを例に説明します)

onShow: 関数() {
 this.getTabBar().setData({
 _tabbat: 0
 })
 },

上記は完了ですが、オンラインで 2 つのタブバーが表示されることを知りました。ここでは表示されません (1 つはカスタム、もう 1 つは組み込み)。表示される場合は、app.js の onLaunch 関数に wx.hideTabBar() を追加して、組み込みのタブバーを非表示にします。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChat ミニプログラム公式ダイナミックカスタムボトムタブバーの例
  • uni-app での WeChat アプレットのカスタム タブバーの適応の詳細な説明
  • WeChatアプレットカスタムタブバーコンポーネントの開発の詳細な説明
  • WeChatアプレットタブバーの上部境界線の色をカスタマイズする方法
  • WeChatアプレット開発におけるカスタムタブバーの実装
  • WeChat アプレットのカスタムスライドトップ TabBar タブでページ切り替え機能を実現する例
  • WeChatアプレットカスタムタブバーステップ練習記録
  • WeChat アプレットのカスタム タブバー custom-tab-bar 6s が出てこない解決策 (カバー ビューが互換性がない)
  • WeChat アプレットのカスタム メニュー スイッチ バー タブバー コンポーネントのコード例
  • WeChat アプレットカスタムタブバーステップ記録

<<:  Docker で既存のイメージに基づいて新しいイメージを構築する方法

>>:  Mac 向け MySQL のインストールと設定のチュートリアル

推薦する

JS でタブ効果を書く

この記事の例では、タブ効果を記述するためのJSの具体的なコードを参考までに共有しています。具体的な内...

div の高さをブラウザの高さに合わせて調整する方法

この古くからある疑問は、数え切れないほどのフロントエンド開発者やバックエンドプログラマーを悩ませてき...

Vue で CSS カスタム変数を使用する方法

目次CSS カスタム変数機能は古くから存在していますが、実際の開発ではあまり使用されていません。その...

DockerHubイメージリポジトリの使い方の詳しい説明

これまで使用していたイメージはすべて DockerHub パブリック リポジトリから取得していました...

非ルートユーザーを使用してDockerコンテナでスクリプト操作を実行する

アプリケーションをコンテナ化した後、Docker コンテナを起動すると、デフォルトで root ユー...

MySQL 8.0.16 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.16圧縮パッケージのインストールと設定方法を参考までに紹介します。...

Centos7 ベースの Nginx Web サイト サーバーの構築の詳細説明 (仮想 Web ホストの構成を含む)

1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...

JavaScript キャンバス テトリス ゲーム

テトリスは非常に古典的な小さなゲームで、私もそれを書いてみました。しかし、できるだけ簡潔で論理的なコ...

MySQL の WriteSet 並列レプリケーションの簡単な分析

【歴史的背景】私は 3 年間 MySQL-DBA として働いてきましたが、MySQL が「基本的に利...

MySQLのファジークエリの要約

1. 一般的な使用法: (1)%で使用する% は 1 つ以上の文字のワイルドカードを表します。たとえ...

Vue は Axios リクエスト フロントエンドのクロスドメイン問題をどのように解決するのか

目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...

docker を使用してコード サーバーをデプロイする方法

画像をプルする # docker pull codercom/code-server # Docke...

クロスブラウザ開発体験のまとめ(I)HTMLタグ

ページにDOCTYPEを追加するブラウザによってタグやスタイルシートの解釈が異なるため、さまざまなブ...

互換性を維持しながら他のウェブページのデータを適用する iframe の使い方

以下は、Shiji Tiancheng が Tencent KartRider ページを呼び出すため...