Comment implémenter la fonction de saut de page de l'applet WeChat pour passer de l'élément de la liste à la page suivante

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

Cet article décrit l'exemple de la fonction de saut de page de l'applet WeChat pour passer de l'élément de la liste à la page suivante. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

De nombreux projets auront une page d'enregistrement de message, c'est-à-dire une page de liste. Cliquez ensuite sur un élément de la liste pour accéder à la page de détails du message. . Voici la suite de l'article précédent , continuez à partager comment passer de l'élément de la liste à la page suivante.

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: 'test?id=1'
})

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

wx.redirectTo({
 url: 'test?id=1'
})

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

wx.switchTab({
 url: '/index'
})

Remarque : wx.navigateBack(OBJECT)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 getCurrentPages()) et décider du nombre de niveaux à renvoyer.

3. Passer 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>

La deuxième étape consiste à utiliser wx :key pour lier l'identifiant à l'élément de la liste

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

La troisième étape consiste à transmettre le correspondant paramètres au lien correspondant à chaque élément de la mise en page La page utilise le composant de navigation du navigateur, spécifie l'URL et transmet les paramètres correspondants au lien correspondant à chaque élément. Suivez simplement l'URL avec ? et la valeur de la clé est connectée. avec &, par exemple :

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

Code source de la démo

  
    {{item.name}}
  

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

Ce qui précède représente l'intégralité du contenu de cet article, j'espère que ce sera le cas. être utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Mise en œuvre des boutons de saisie et de réglage dynamique dans le mini-programme WeChat

Page dans le mini-programme WeChat Méthodes de communication entre

Introduction à la définition de la réutilisation globale des données et des fonctions et des modèles dans les mini-programmes WeChat

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!