So implementieren Sie die Seitensprungfunktion des WeChat-Applets, um von einem Element in der Liste zur nächsten Seite zu springen-Mini-Programmentwicklung-php.cn

So implementieren Sie die Seitensprungfunktion des WeChat-Applets, um von einem Element in der Liste zur nächsten Seite zu springen

不言

Freigeben： 2018-06-26 17:31:18

Original

3789 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die Seitensprungfunktion des WeChat-Miniprogramms und die Methode zum Springen von einem Element in der Liste zur nächsten Seite vorgestellt. Er fasst den Seitensprung und den Listenelementsprung des WeChat-Miniprogramms anhand spezifischer Beispiele zusammen und analysiert sie. Freunde, die relevante Bedienkenntnisse auf der Seite benötigen, können sich auf

beziehen. Dieser Artikel beschreibt das Beispiel der Seitensprungfunktion des WeChat-Applets, um von einem Element in der Liste zur nächsten Seite zu springen. Teilen Sie es als Referenz mit allen:

Viele Projekte verfügen über eine Nachrichtendatensatzseite, also eine Listenseite. Klicken Sie dann auf ein Element in der Liste, um die Nachrichtendetailseite aufzurufen Hier ist die Fortsetzung des vorherigen Artikels. Teilen Sie weiterhin mit, wie Sie von dem Element in der Liste zur nächsten Seite springen.

1. Rendern

Gehen Sie von der Listenseite links zur Detailseite rechts

2. Springen zwischen Seiten

Das erste, was Sie sich ansehen sollten, ist das Springen von Seiten im WeChat Applet Wählen Sie:

1. Behalten Sie die aktuelle Seite bei und springen Sie zu einer Seite in der App. Verwenden Sie

, um zur ursprünglichen Seite zurückzukehren. wx.navigateBack

wx.navigateTo({
 url: &#39;test?id=1&#39;
})

Nach dem Login kopieren

2. Schließen Sie die aktuelle Seite und springen Sie zu einer Seite in der App.

wx.redirectTo({
 url: &#39;test?id=1&#39;
})

Nach dem Login kopieren

3. Springen Sie zur TabBar-Seite und schließen Sie alle anderen Nicht-TabBar-Seiten

wx.switchTab({
 url: &#39;/index&#39;
})

Nach dem Login kopieren

Hinweis: Schließen Sie die aktuelle Seite und kehren Sie zur vorherigen Seite oder Seite mit mehreren Ebenen zurück. Sie können den aktuellen Seitenstapel über wx.navigateBack(OBJECT) abrufen und entscheiden, wie viele Ebenen zurückgegeben werden sollen. getCurrentPages())

3. Springen Sie vom Listenelement zur nächsten Seite

Der erste Schritt besteht darin, die Liste zu rendern und wx:for darauf zu verwenden Durch die Bindung der Steuereigenschaft an ein Array kann die Komponente wiederholt mithilfe der Daten jedes Elements im Array gerendert werden. Standardmäßig ist der tiefgestellte Variablenname des aktuellen Elements im Array standardmäßig index und der Variablenname des aktuellen Elements im Array standardmäßig item

<view wx:for="{{array}}">
 {{index}}: {{item.message}}
</view>

Nach dem Login kopieren

Der zweite Schritt besteht darin, wx:key zu verwenden. Binden Sie den Bezeichner

<view wx:for="{{array}}" wx:key="{{item.viewid}}">
 {{index}}: {{item.message}}
</view>

Nach dem Login kopieren

an die Elemente in der Liste. Der dritte Schritt besteht darin, die entsprechenden Parameter an zu übergeben Geben Sie für jedes Element den entsprechenden Link ein und verwenden Sie die Navigator-Navigation. Geben Sie die entsprechende URL für jedes Element an und verbinden Sie den Schlüsselwert mit „?“. zum Beispiel:

url="../detail/detail?index={{item.viewid}}"

Nach dem Login kopieren

4. Demo-Quellcode


  
    {{item.name}}

Nach dem Login kopieren

Page({
 data: {
   words: [{message: &#39;微信小程序&#39;,viewid:&#39;1&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;2&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;3&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;4&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;5&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;6&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;7&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;8&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;9&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;}]
 }
 ...
})

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels, der für das weitere Studium hilfreich sein wird Inhalt, achten Sie bitte auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Implementierung von Eingabeeingabe- und dynamischen Einstellungsschaltflächen im WeChat-Miniprogramm

Seite im WeChat-Miniprogramm Methoden der Kommunikation zwischen

Einführung in die Definition globaler Daten- und Funktionswiederverwendung und Vorlagen in WeChat-Miniprogrammen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Seitensprungfunktion des WeChat-Applets, um von einem Element in der Liste zur nächsten Seite zu springen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!