This article mainly introduces the relevant information on the detailed explanation of page jump of WeChat Mini Program and attached with simple examples and implementation renderings. Friends in need can refer to
WeChat Mini Program Page Jump Passing parameters is a function that must be used when making WeChat mini programs. Here I will record the information I learned to implement the code.
I am new to the WeChat applet, and I still don’t know much about the syntax and attributes in it. If there are not many places, I hope you can give me some advice. Today I will talk about how to jump and transfer parameters in the WeChat applet. Without further ado, let’s get straight to the code.
The function implemented is to add a click function to the list to pass parameters to the next page;
The code is as follows:
<import src="../WXtemplate/headerTemplate.wxml"/> <view> <!--滚动图--> <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> <!--功能按钮--> <view class="section-bg"> <block wx:for="{{buttonNum}}"> <!--模版--> <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> <!--资讯列表--> <view> <block wx:for="{{listNum}}"> <template is="newList" data="{{item,index}}"/> </block> </view> </view>
where
The template code is as follows
<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>
Only the click method is added for the following list
Click list js code
listClick:function(event){ console.log(event); var p = event.currentTarget.id wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=上一页的参数'}) }
where
wx.navigateTo ({url:'/pages/xiangqing/xiangqing?id=parameters of the previous page'})
is the jump method, id is the parameter that needs to be passed if the parameter is a dynamic parameter The code is as follows:
listClick:function(event){ console.log(event); var p = event.currentTarget.id wx.navigateTo({url:'/pages/xiangqing/xiangqing?id='+p}) }
where p is the id value set above for each row
Get the value on the next page The code is as follows:
data:{ // text:"这是一个页面" title:'' }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 this.setData({ title:options.id })
Then the code is displayed on the page as follows:
Final effect:
Development of WeChat Mini Program to realize page switching of tabs
WeChat Mini Program
Page jump and data transfer
#
The above is the detailed content of Introduction to WeChat applet page jump parameter transfer. For more information, please follow other related articles on the PHP Chinese website!