WeChat アプレットウィンドウのナビゲーションバーの構成 (詳細な例)-ミニプログラム開発-php.cn

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

WBOY

リリース： 2022-11-15 20:08:51

転載

3124 人が閲覧しました

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

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

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

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 を通じて自動更新位置を設定します[関連する学習の推奨事項: 小プログラム学習チュートリアル ]