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 のインストールと設定のチュートリアル

推薦する

MyISAMとInnoDBの違いについてお話しましょう

主な違いは次のとおりです。 1. MySQL はデフォルトで MyISAM を使用します。 2. M...

VMware マルチノード環境を構成する方法

このチュートリアルでは CentOS 7 64 ビットを使用します。各仮想マシンに 2GB のメモリ...

ウェブデザインスキル:中国語と英語が混在するウェブページの上位表示の問題

<br />私はこの問題で気が狂いそうです。症状は次のとおりです。 症状の説明: Int...

mysql データ型変換の実装

1. 問題下図のような表があり、結果値がreference_high値より大きいデータを見つける必要...

MySQL を使用した分散ロックの実装

導入分散システムでは、分散ロックは最も基本的なツール クラスです。たとえば、支払い機能を備えた 2 ...

SSM VUE Axios の詳細な説明

目次SQL ログを表示するにはどうすればいいですか? ? SpringMVC でのパラメータ渡しの説...

Squid を使用して http および https 用のプロキシ サーバーを構築する方法

nginx を導入した際に、フォワードプロキシの設定も nginx を使っていました。しかし、htt...

JS配列ループ方式と効率分析の比較

配列メソッドJavaScript には多くの配列メソッドが用意されています。次の図は、ほとんどの配列...

SQLデータベースの14の事例の紹介

データシート /* Navicat SQLite データ転送 ソースサーバー: school ソース...

JavaScript でよく使われる 5 つのオブジェクト

目次1. JavaScript オブジェクト1).配列オブジェクト2).ブールオブジェクト3).日付...

HTML テーブルの行間および列間の操作 (rowspan、colspan)

一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され...

HTML の ReadOnly と Enabled の違い

ReadOnly 属性を持つ TextBox は、クライアント上で次のマークアップとして表示されます...

ウェブデザインにおける装飾要素の応用の概要

<br />序文: このチュートリアルを読む前に、序文を注意深く読んでください。そうしな...

MySQL 5.7.18 無料インストールバージョンの設定チュートリアル

MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...

IDEA2021 tomcat10 サーブレットの新しいバージョンの落とし穴

私が学習していたときに使用していたバージョンは比較的新しいものであり、インターネット上のチュートリア...