版权声明:本文为博主原创文章,未经博主允许不得转载。如有转载请留言,谢谢~ https://blog.csdn.net/qq_38209578/article/details/86606817
本文主要介绍微信小程序如何跨页面传参
方法一:通过js带参数跳转页面(常用)
相关代码如下:
mall.wxml
<block wx:for="{{data}}" wx:key="" wx:for-index="index">
<view class='relative food-list-wrapper' bindtap='detailTap' data-id="{{index}}"> // `data-id`为所需传参的对象;`detailTap`为点击跳转事件
<template is="list" data="{{item}}"/> // 列表页的代码
</view>
</block>
mall.js
detailTap: function (event) {//参数传递
let postId = event.currentTarget.dataset.id; // 获取所需传递的参数对象
if (postId != "" || postId != undefined) {
wx.navigateTo({
url: 'mallInfo?id=' + postId, // 页面带参数跳转
})
}
},
mallInfo.js
onLoad: function (options) {
if (options) {
console.log(options.id); // 此处为我们从上一个页面传递过来的参数对象(可以是一个数组)
this.setData({
id: options.id
})
}
// this.initData(); //获取详情页数据
},
方法二:通过本地缓存,跨页面获取
mall.wxml代码如上所示
mall.js
detailTap: function (event) {
let postId = event.currentTarget.dataset.id;
if (postId != "" || postId != undefined) {
wx.setStorageSync('id', postId);//第一次点击之后存储数据在本地
wx.navigateTo({
url: 'mallInfo,
})
}
},
mallInfo.js
onLoad: function (options) {
let id= wx.getStorageSync(id);/**获取本地同步数据 */
if (id) {
console.log(id); // 此处为缓存本地的参数对象(可以是一个数组)
this.setData({
id:id
})
}
// this.initData(); //获取详情页数据
},