この記事では、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 のインストールと設定のチュートリアル
主な違いは次のとおりです。 1. MySQL はデフォルトで MyISAM を使用します。 2. M...
このチュートリアルでは CentOS 7 64 ビットを使用します。各仮想マシンに 2GB のメモリ...
<br />私はこの問題で気が狂いそうです。症状は次のとおりです。 症状の説明: Int...
1. 問題下図のような表があり、結果値がreference_high値より大きいデータを見つける必要...
導入分散システムでは、分散ロックは最も基本的なツール クラスです。たとえば、支払い機能を備えた 2 ...
目次SQL ログを表示するにはどうすればいいですか? ? SpringMVC でのパラメータ渡しの説...
nginx を導入した際に、フォワードプロキシの設定も nginx を使っていました。しかし、htt...
配列メソッドJavaScript には多くの配列メソッドが用意されています。次の図は、ほとんどの配列...
データシート /* Navicat SQLite データ転送 ソースサーバー: school ソース...
目次1. JavaScript オブジェクト1).配列オブジェクト2).ブールオブジェクト3).日付...
一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され...
ReadOnly 属性を持つ TextBox は、クライアント上で次のマークアップとして表示されます...
<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...
MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...
私が学習していたときに使用していたバージョンは比較的新しいものであり、インターネット上のチュートリア...