Dieser Artikel bringt Ihnen relevantes Wissen über dasWeChat 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 istrpx. 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
特别的在我们微信小程序开发中，我们前面提到过推荐使用 iPhone 6 进行开发，因为 iPhone 的 px =375，那么我们 2 rpx= 1 px
关于全局配置和局部配置
关于全局配置和局部配置我们前面也是以及介绍完毕，感兴趣的小伙伴可以前面考古一下！下面我会专门讲一下在 全局配置中常用的配置项！
老规矩先用表格展示一下。
| Ü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! | |
|---|---|
| 1. Allgemeine Konfigurationselemente der globalen Konfiguration | Die alten Regeln werden zuerst in einer Tabelle angezeigt. |
| Configuration Element Name | Function |
| Spages | |
| tabBar |
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
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 和 下拉相关属性 ，剩下的配置项大家可以自行尝试！
话不多说开始操作！
打开 app.json ，找到 window
在 window 中我们可以看到下面默认的配置项目
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" },
我们可以看到第三行的 navigationBarTitleText 即为我们的导航栏标题内容的配置，默认为 Weixin ，比如我更改为 “皮皮的小屋”
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "皮皮的小屋", "navigationBarTextStyle":"black" },
效果展示：
关于下拉刷新我相信大家一定经常使用，比如我们使用手机时卡顿了，那么我们习惯性动作就是向下拉动屏幕，这样我们的页面就会重新加载，那么我们如何实现功能呢？
首先打开 app.json 进入 window 配置，打开下拉功能
"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#ffa", "navigationBarTitleText": "皮皮的小屋", "navigationBarTextStyle":"black", "enablePullDownRefresh": true },
在最后一行我们将 enablePullDownRefresh 设置为 true 即可
效果展示：
至此我们对于这些配置就进行了简单的介绍，我们在自行尝试这些配置项的时候需要注意的就是我们 onReachBottomDistance ，他的上拉触底的意思就是我们平时刷购物平台的时候，当我们刷新到离底部一定距离的时候，页面会自动刷新下面的数据，我们就是通过 onReachBottomDistance 设置自动刷新的位置
Ohne weitere Umschweife, fangen wir an!
Über Weiter Zum 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?
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!
So lösen Sie das Problem, dass die DLL nicht geladen werden kann
location.hash
Methode zum Öffnen einer Caj-Datei
Methoden zur Reparatur von Datenbankschwachstellen
So beantragen Sie die Registrierung einer E-Mail-Adresse
Darstellungsmethode der String-Konstante
So entfernen Sie das Wasserzeichen des Douyin-Kontos aus heruntergeladenen Videos von Douyin
Was ist eine Mac-Adresse?
