Konfiguration der Navigationsleiste des WeChat-Applet-Fensters (detailliertes Beispiel)

Dieser Artikel bringt Ihnen relevantes Wissen über das WeChat Mini-Programm, das hauptsächlich die relevanten Inhalte zur Konfiguration der Windows-Navigationsleiste vorstellt. Ich hoffe, dass es hilfreich ist alle.

【Verwandte Lernempfehlung: Tutorial zum Lernen von Miniprogrammen】

Stellen Sie die Anwendung unseres Rpx in WXSS und unsere Konfiguration des globalen Stils und des lokalen Stils des Miniprogramms vor um unsere Fensternavigationsleiste zu konfigurieren.

• Über die rpx-Einführung

  1 Wir haben in unserem vorherigen HTML-Lernen etwas über die Einheit px (Auflösung) gelernt. Sie wird oft verwendet, wenn wir Komponenten einrichten, daher verwenden wir im WeChat-Applet What ist die Einheit der Auflösung? Das ist rpx. Was ist also das Besondere daran, dass es sich lohnt, es speziell einzurichten?

  2. Es handelt sich um eine Größeneinheit, die die Bildschirmbreite anpasst Stellen Sie die Größe von Elementen und Schriftarten über rpx ein. Das Miniprogramm kann sich automatisch an die Konvertierung zwischen rpx und px auf Bildschirmen unterschiedlicher Größe anpassen dass wir die Verwendung des iPhone 6 für die Entwicklung empfehlen, da die px des iPhone = 375 sind, dann haben wir 2 rpx = 1 px

  <span style="font-size: 14px;">特别的在我们微信小程序开发中，我们前面提到过推荐使用 iPhone 6 进行开发，因为 iPhone 的 px =375，那么我们 2 rpx= 1 px</span>

• 关于全局配置和局部配置

  关于全局配置和局部配置我们前面也是以及介绍完毕，感兴趣的小伙伴可以前面考古一下！下面我会专门讲一下在 全局配置中常用的配置项！

一、全局配置的常用配置项

老规矩先用表格展示一下。

Über globale Konfiguration und lokale KonfigurationÜber globale Konfiguration und Lokale Konfiguration, wir haben es auch schon einmal eingeführt, danke. Interessierte Freunde können im Voraus etwas Archäologie betreiben! Im Folgenden werde ich über die häufig verwendeten Konfigurationselemente in der globalen Konfiguration sprechen! Configuration Element Name FunctionSpagesStorage -Pfad für alle Seiten des aktuellen Mini -Programms Legen Sie den tabBar-Effekt am unteren Rand des Miniprogramms fest

1. Allgemeine Konfigurationselemente der globalen Konfiguration	Die alten Regeln werden zuerst in einer Tabelle angezeigt.
	tabBar

• style
  Ob die neue Version der Komponentenoption aktiviert werden soll

• pages Wie wir bereits zuvor vorgestellt haben, in Um unsere Listenseite anzuzeigen, haben wir den ersten Pfad in den Pfad unserer Liste geändert, und dann zeigt die Seite unseres WeChat-Applets den Inhalt unserer Liste an

• Fenster und TabBar Schauen wir uns als nächstes ein Bild an , und er stellt unsere Liste vor.

  Stil Wir haben es Ihnen auch gezeigt, als wir den Stil zuvor eingeführt haben. Wenn wir den Stil löschen, wird unser Komponentenstil zur alten Version

2. Fensternavigationsleiste

Unsere Fensternavigationsleisteneinstellungen umfassen die ersten beiden im vorherigen Bild gezeigten Bereiche. Lassen Sie uns zunächst die allgemeinen Konfigurationselemente unseres Fensterknotens vorstellen. StandardwertFunktionCharacter. string # 000000backgroundTextStyleenablePullDownRefreshonReachBottomDistance

Alle unsere oben genannten Einstellungen werden im Fenster in app.json festgelegt! ! ! Als nächstes werde ich navigationBarTitleText und Dropdown-bezogene Eigenschaften demonstrieren. Sie können die verbleibenden Konfigurationselemente selbst ausprobieren! 我们所有的上述设置都是在 app.json 内的 window 里面进行设置！！！接下来我演示一下 navigationBarTitleText 和 下拉相关属性 ，剩下的配置项大家可以自行尝试！

2.1 navigationBarTitleText 配置项

话不多说开始操作！

• 打开 app.json ，找到 window

• 在 window 中我们可以看到下面默认的配置项目

    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
   },

• 我们可以看到第三行的 navigationBarTitleText 即为我们的导航栏标题内容的配置，默认为 Weixin ，比如我更改为 “皮皮的小屋”

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "皮皮的小屋",
    "navigationBarTextStyle":"black"
   },

• 效果展示：

  

2.2 下拉刷新的配置

关于下拉刷新我相信大家一定经常使用，比如我们使用手机时卡顿了，那么我们习惯性动作就是向下拉动屏幕，这样我们的页面就会重新加载，那么我们如何实现功能呢？

• 首先打开 app.json 进入 window 配置，打开下拉功能

    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ffa",
    "navigationBarTitleText": "皮皮的小屋",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
   },

• 在最后一行我们将 enablePullDownRefresh 设置为 true 即可

• 效果展示：

  

至此我们对于这些配置就进行了简单的介绍，我们在自行尝试这些配置项的时候需要注意的就是我们 onReachBottomDistance ，他的上拉触底的意思就是我们平时刷购物平台的时候，当我们刷新到离底部一定距离的时候，页面会自动刷新下面的数据，我们就是通过 onReachBottomDistance 设置自动刷新的位置

2.1 navigationBarTitleText-Konfigurationselement

Ohne weitere Umschweife, fangen wir an!

App.json öffnen und Fenster suchen

🎜Im Fenster können wir die folgenden Standardkonfigurationselemente sehen🎜rrreee

🎜 Das können wir Sehen Sie, dass der navigationBarTitleText in der dritten Zeile die Konfiguration unseres Navigationsleistentitels ist. Ich habe ihn beispielsweise in „Pippis Hütte“ geändert. 🎜rrreee

🎜Effektanzeige: 🎜

🎜🎜

🎜2.2 Pulldown-Aktualisierungskonfiguration

🎜Über WeiterZum Aktualisieren ziehen Ich glaube, Sie müssen es oft verwenden. Wenn wir beispielsweise bei der Verwendung unserer Mobiltelefone nicht weiterkommen, ist unsere gewohnheitsmäßige Aktion um den Bildschirm nach unten zu ziehen, damit unsere Seite neu geladen wird. Wie implementieren wir die Funktion? 🎜

• 🎜Öffnen Sie zuerst app.json, geben Sie die Fensterkonfiguration ein und aktivieren Sie die Pulldown-Funktion🎜rrreee
• 🎜In der letzten Zeile wir setzen enablePullDownRefresh auf true🎜
• 🎜Effektanzeige: 🎜

  🎜🎜

🎜Bisher haben wir eine kurze Einführung in diese Konfigurationen gegeben. Worauf wir wann achten müssen Das Ausprobieren dieser Konfigurationselemente ist unser onReachBottomDistance. Das Hochziehen nach unten bedeutet, dass die Seite beim Aktualisieren der Einkaufsplattform normalerweise bis zu einem bestimmten Abstand vom unteren Rand automatisch die folgenden Daten aktualisiert und wir die automatische Aktualisierung festlegen Position durch onReachBottomDistance code>🎜🎜【Verwandte Lernempfehlungen: 🎜Mini-Programm-Lern-Tutorial🎜】🎜

		Attributname	Typ
		navigationBarTitleText	string
Navig Titelinhalt der Navigationsleiste		navigationBarBackgroundColor	Hexcolor
Legen Sie die Hintergrundfarbe der Navigationsleiste fest (z. B. fluoreszierendes Gelb #ffa).	#ffffff	Die Hintergrundfarbe des Fensters
string	dark	Legen Sie den Stil des Dropdown-Ladens fest, der nur Dunkel/Hell unterstützt.
Boolean.	falsch	Ob die Dropdown-Aktualisierung global aktiviert werden soll
Number	50	Page Pull Bottom Event Triggering Threshold (Entfernung vom unteren Rand der Seite in px)

Das obige ist der detaillierte Inhalt vonKonfiguration der Navigationsleiste des WeChat-Applet-Fensters (detailliertes Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!