この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker で既存のイメージに基づいて新しいイメージを構築する方法
>>: Mac 向け MySQL のインストールと設定のチュートリアル
この記事の例では、タブ効果を記述するためのJSの具体的なコードを参考までに共有しています。具体的な内...
この古くからある疑問は、数え切れないほどのフロントエンド開発者やバックエンドプログラマーを悩ませてき...
目次CSS カスタム変数機能は古くから存在していますが、実際の開発ではあまり使用されていません。その...
これまで使用していたイメージはすべて DockerHub パブリック リポジトリから取得していました...
1. nginxをダウンロードする [root@localhost my.Shells]# dock...
アプリケーションをコンテナ化した後、Docker コンテナを起動すると、デフォルトで root ユー...
この記事では、MySQL 8.0.16圧縮パッケージのインストールと設定方法を参考までに紹介します。...
1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...
テトリスは非常に古典的な小さなゲームで、私もそれを書いてみました。しかし、できるだけ簡潔で論理的なコ...
【歴史的背景】私は 3 年間 MySQL-DBA として働いてきましたが、MySQL が「基本的に利...
1. 一般的な使用法: (1)%で使用する% は 1 つ以上の文字のワイルドカードを表します。たとえ...
目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...
画像をプルする # docker pull codercom/code-server # Docke...
ページにDOCTYPEを追加するブラウザによってタグやスタイルシートの解釈が異なるため、さまざまなブ...
以下は、Shiji Tiancheng が Tencent KartRider ページを呼び出すため...