WeChat アプレット ウィンドウのナビゲーション バーの構成 (詳細な例)

この記事は、WeChat ミニ プログラム に関する関連知識を提供し、主に Windows ナビゲーション バーの構成に関する関連コンテンツを紹介します。次に、ウィンドウ ナビゲーション バーの構成方法を詳しく紹介します。みんなが助けてくれることを願っています。

[関連する学習の推奨事項: 小規模プログラム学習チュートリアル]

wxss での rpx のアプリケーションと小規模向けのアプリケーションを紹介します。プログラム プログラムのグローバル スタイルとローカル スタイルの構成、次にウィンドウ ナビゲーション バーの構成方法を詳しく紹介します。

• rpx

  1. 以前の HTML 学習 A 単元で px (解像度) について学習しました。はコンポーネントを設定するときによく使用されますが、WeChat アプレットで使用する解像度単位は何ですか?それは rpx です。それでは、具体的に設定する価値があるほど彼の特別な点は何でしょうか?

  2. rpx は WeChat アプレットに固有の、画面適応を解決するサイズ単位です。画面幅に関係なく、画面幅に応じて適応できます。画面のサイズ、および画面が指定されます。幅は 750rpx です。rpx を介して要素とフォントのサイズを設定します。アプレットは、異なるサイズの画面上で rpx と px の間の変換を自動的に調整できます。

  #特に WeChat アプレット開発では、開発には iPhone 6 を使用することをお勧めします。これは、iPhone の px = 375 であるため、2 rpx = 1 px<span style="font-size: 14px;"></span>

• #グローバル構成とローカル構成について

  グローバル構成とローカル構成については、以前にも紹介しました。興味のある友達は、事前に調べてみましょう。以下では、グローバル設定でよく使用される設定項目について説明します。

#1. グローバル設定の一般的に使用される設定項目

古いルールは最初に表示されます。テーブル。

#設定項目名機能ページ数現在のミニ プログラムのすべてのページを保存するためのストレージ パスミニ プログラム ウィンドウの外観を設定しますミニ プログラムの下部に tabBar 効果を設定しますコンポーネントの新しいバージョンを有効にするオプションpages 以前に紹介したように、リスト ページを表示するために、ページの最初のパスをリストのパスに変更しました。次に、WeChat アプレットのページが表示されます。リストの内容は、

	window
	tabBar
	style

• #window と tabBar です。次に、構成で使用される領域を紹介する図を見てみましょう

• style 以前ボタンを導入した際にも紹介しましたが、スタイルを削除するとコンポーネントのスタイルが旧バージョンになります

# 関数図

• 2. ウィンドウ ナビゲーション バー

ウィンドウ ナビゲーションの設定バーには、前の図に示されている最初の 2 つの領域が含まれています。まず、ウィンドウ ノードの一般的な構成項目を紹介します。

#属性名タイプ

デフォルト値関数単語文字列ナビゲーション バーのタイトルの内容ナビゲーション バーの背景色を設定します (蛍光黄色#ffa など)ナビゲーション バーのタイトルの色を設定します (白と黒のみ) ウィンドウの背景色ダーク/ライトのみをサポートするようにドロップダウン読み込みのスタイルを設定しますドロップダウンをグローバルに有効にするかどうか RefreshPage プルダウンイベントトリガーのしきい値 (ページの下部からの距離 (ピクセル単位))

		navigationBarTitleText	string
	navigationBarBackgroundColor	Hexcolor	#000000
	navigationBarTextStyle	string	white
	backgroundColor	Hexcolor	#ffffff
	backgroundTextStyle	string	dark
	enablePullDownRefresh	Boolean	false
	onReachBottomDistance	Number	50
	上記の設定はすべて、app.json 内のウィンドウで設定されます。 ！ ！次に、navigationBarTitleText とドロップダウン関連のプロパティを示します。残りの構成項目は自分で試すことができます。 2.1 NavigationBarTitleText 構成項目 早速、始めてみましょう。 app.json を開いてウィンドウを見つけます ウィンドウには、次のデフォルトの構成項目が表示されます   "window":{   "backgroundTextStyle":"light",   "navigationBarBackgroundColor": "#fff",   "navigationBarTitleText": "Weixin",   "navigationBarTextStyle":"black"  }, 3 行目の NavigationBarTitleText がナビゲーション バーのタイトル コンテンツの構成であることがわかります。デフォルトは Weixin です。たとえば、「Pippi's Cabin」に変更しました "window":{   "backgroundTextStyle":"light",   "navigationBarBackgroundColor": "#fff",   "navigationBarTitleText": "皮皮的小屋",   "navigationBarTextStyle":"black"  }, エフェクト表示: #2.2 プルダウン更新設定 プル・トゥ・リフレッシュについて# これは頻繁に使用する必要があると思いますが、たとえば、携帯電話を使用中に行き詰まった場合、私たちの習慣的な行動は画面を引き下げることです。ページがリロードされるようにするには、この関数をどのように実装すればよいでしょうか? まず app.json を開き、ウィンドウ構成を入力して、ドロップダウン機能をオンにします   "window":{   "backgroundTextStyle":"light",   "navigationBarBackgroundColor": "#ffa",   "navigationBarTitleText": "皮皮的小屋",   "navigationBarTextStyle":"black",   "enablePullDownRefresh": true  }, 最後の行で、enablePullDownRefresh を設定します。これが true の場合、 # により効果が表示されます。 ##これまで簡単に設定を紹介してきましたが、これらの設定項目を自分で試す際に注意する必要があるのはonReachBottomDistanceです。ショッピング プラットフォームを更新します (一番下に更新すると) 特定の距離に達すると、ページは次のデータを自動的に更新します。onReachBottomDistance を通じて自動更新位置を設定します[関連する学習の推奨事項: 小プログラム学習チュートリアル ]

以上がWeChat アプレット ウィンドウのナビゲーション バーの構成 (詳細な例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。