WeChat-Miniprogramm-Seitensprungfunktion-Mini-Programmentwicklung-php.cn

WeChat-Miniprogramm-Seitensprungfunktion

小云云

Freigeben： 2017-12-07 15:59:40

Original

4422 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 die Beziehung zwischen dem Seitensprung des WeChat-Miniprogramms und der Sprungseite eines Listenelements zusammen und analysiert sie Anhand konkreter Beispiele können Freunde, die es benötigen, auf die Betriebsfähigkeiten verweisen.

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 wx.navigateBack, um zur ursprünglichen Seite zurückzukehren.

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 mehrstufigen Seite 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

Im zweiten Schritt verwenden Sie wx:key, um die Kennung

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

Nach dem Login kopieren

an die zu binden Der dritte Schritt besteht darin, für jeden Link die entsprechenden Parameter auf der Layoutseite zu übergeben die URL mit ? und dem Schlüsselwert, zum Beispiel:

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

Nach dem Login kopieren

4. Demo-Quellcode


  
    {{item.name}}

Nach dem Login kopieren

Verwandte Empfehlungen:

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

So implementieren Sie die Vorschaufunktion zur Bildvergrößerung im WeChat-Applet

So entwickeln Sie eine Datumsauswahl für das WeChat-Miniprogramm

Zusammenfassung der Erfahrungen in der Entwicklung von Miniprogrammen

Das obige ist der detaillierte Inhalt vonWeChat-Miniprogramm-Seitensprungfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!