Detalles de la transición de página en WeChat Mini Program

　Saltar y pasar parámetros en la página de WeChat Mini Program, esta función es necesaria para hacer WeChat Mini Program, aquí se registran los materiales de código que he aprendido.

Para los principiantes en WeChat Mini Program, no estoy muy familiarizado con la sintaxis y las propiedades. Si hay algún problema, espero que todos los grandes maestros me enseñen. Hoy hablaré de cómo saltar y pasar parámetros en WeChat Mini Program, sin muchas palabras, aquí está el código.

La función que realiza es agregar una función de clic a la lista y pasar parámetros a la siguiente página;

　　　

El código a continuación es:

<import src="../WXtemplate/headerTemplate.wxml"/> 
<view> 
 <!--Diapositivas--> 
 <view> 
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoPlay}}" interval="{{intervalTime}}" duration="{{Time}}"> 
 <block wx:for="{{imageURl}}"> 
  <swiper-item> 
   <image src="{{item}}" class="imagePX"></image> 
  </swiper-item> 
 </block> 
 </swiper> 
 </view> 
 <!--Botones de función--> 
 <view class="section-bg"> 
 <block wx:for="{{buttonNum}}"> 
  <!--Plantilla--> 
  <template is="buttonList" data="{{item}}"/> 
  <!--<view class="section-item"> 
  <image class="section-img" src="{{item.image}}"></image> 
  <text class="section-text">{{item.text}}</text> 
 </view>--> 
 </block> 
 </view> 
 <!--Lista de información--> 
 <view> 
 <block wx:for="{{listNum}}"> 
  <template is="newList" data="{{item,index}}"/> 
 </block> 
 </view> 
 </view> 

donde

<template is="buttonList" data="{{item}}"/>　

Para el código del patrón a continuación

<template name="buttonList"> 
 <view class="section-item"> 
  <image class="section-img" src="{{item.image}}" bindtap="buttonClick"></image> 
  <text class="section-text">{{item.text}}</text> 
 </view> 
</template> 
<!--list--> 
<template name="newList"> 
 <view class="section-list" bindtap="listClick" id="{{index}}">}} 
 <view> 
  <image class="list-img" src="{{item.image}}"></image> 
 </view> 
  <view class="section-textt"> 
  <view class="title"><text>{{item.title}}</text></view> 
  <view class="subTitle"><text>{{item.subTitle}}</text></view> 
 </view> 
 </view> 
</template> 

Aquí se ha agregado un método de clic a la lista inferior

Código de js al hacer clic en la lista

listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=parámetros de la página anterior'}) 
 } 

donde

wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=parámetros de la página anterior'})　

Método de cambio, id es el parámetro que necesita transmitir Si el parámetro es un parámetro dinámico, el código es como se indica a continuación:　

listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 wx.navigateTo({url:'/pages/xiangqing/xiangqing?id='+p}) 
 } 

donde p es el valor de id configurado para cada línea anterior

El código para obtener valores en la siguiente página es como se indica a continuación:　

 data:{ 
 // text:"Esta es una página" 
 title:'' 
 }, 
 onLoad:function(options){ 
 // Inicialización de la página onLoad:options son los parámetros llevados por la página de cambio 
 this.setData({ 
 title:options.id 
 ) 

Luego muestra el código en la página como se indica a continuación:

<view>{{title}}</view>　

Efecto final alcanzado:

Gracias por leer, espero que pueda ayudar a todos, gracias por el apoyo a nuestro sitio!