Fonction de saut de page du mini programme WeChat-Développement de mini-programmes-php.cn

Fonction de saut de page du mini programme WeChat

小云云

Libérer： 2017-12-07 15:59:40

original

4422 Les gens l'ont consulté

Cet article présente principalement la fonction de saut de page du mini programme WeChat et la méthode de saut de l'élément de la liste à la page suivante. Il résume et analyse la relation entre le saut de page du mini programme WeChat et la page de saut d'élément de liste. sur la base d'exemples spécifiques, les amis qui en ont besoin peuvent se référer aux compétences opérationnelles.

1. Rendu

Passer de la page de liste à gauche à la page de détails à droite

2. Sauter entre les pages

La première chose à regarder est le saut de page. Il existe trois méthodes de saut de page disponibles dans WeChat. applet Sélectionnez :

1. Conservez la page actuelle et accédez à une page de l'application. Utilisez wx.navigateBack pour revenir à la page d'origine.

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

Copier après la connexion

2. Fermez la page actuelle et accédez à une page de l'application.

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

Copier après la connexion

3. Accédez à la page tabBar et fermez toutes les autres pages non-tabBar

<🎜. >

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

Copier après la connexion

Remarque : Fermez la page actuelle et revenez à la page précédente ou à la page à plusieurs niveaux. Vous pouvez obtenir la pile de pages actuelle via wx.navigateBack(OBJECT) et décider du nombre de niveaux que vous devez revenir. getCurrentPages())

3. Passez de l'élément de liste à la page suivante

La première étape consiste à afficher la liste et à utiliser wx:for sur le composant. En liant la propriété de contrôle à un tableau, le composant peut être rendu de manière répétée en utilisant les données de chaque élément du tableau. Par défaut, le nom de variable d'indice de l'élément actuel dans le tableau est par défaut index, et le nom de variable de l'élément actuel dans le tableau est par défaut item

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

Copier après la connexion

La deuxième étape, utilisez wx:key pour lier l'identifiant

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

Copier après la connexion

au éléments de la liste. La troisième étape, pour chaque Le lien correspondant à un élément transmet les paramètres correspondants. Utilisez le composant de navigation du navigateur sur la page de mise en page. Spécifiez l'URL et transmettez les paramètres correspondants pour le lien correspondant à chaque élément. l'URL avec ? et la valeur clé. Utilisez & pour connecter plusieurs paramètres, par exemple :

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

Copier après la connexion

. 4. Code source de la démonstration


  
    {{item.name}}

Copier après la connexion

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;}]
 }
 ...
})

Copier après la connexion

Recommandations associées :

Comment implémenter la fonction d'aperçu d'agrandissement d'image dans l'applet WeChat

Comment développer un sélecteur de date pour le mini programme WeChat

Résumé de l'expérience en développement de mini programmes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!