微信小程序页面A携带参数跳转到页面B，页面B获取页面A传来的参数并且存到data里面，在页面B中渲染成功

页面A的wxml

<view class="tuijian-food-box" ><view class="tuijian-food" wx:for="{{imglist}}" bindtap="navigateTo" data-img="{{item.img}}" data-name="{{item.name}}" data-pirce="{{item.pirce}}"><image src="{{item.img}}"></image><view style="margin-left: 30rpx;">{{item.name}}</view><view style="color:red; margin-left: 30rpx; display: flex; align-items: baseline;"> <!-- display: flex;文本同一行显示，align-items: baseline;文本上下对齐 --><view style="font-size: 25rpx;">￥</view><view style="font-size: 35rpx;">{{item.pirce}}</view></view>

代码说明：

关键代码

1、先写一个bindtap=”navigateTo”监听事件，目的是当你点击一个组件时，就会从页面A跳转到页面B

2、携带参数：data-img=”{{item.img}}” ,data-（属性，属性的名字随便写）=”（携带的参数，我这里携带的参数是数组遍历出来的参数）” , 如果要携带多个参数，就写多几个data-（属性）=”（携带的参数）,

页面A遍历的数据，写在js页面的data里面

imglist: [{ name: "虾饺皇", img: "../../images/tuijian/xiajiaohuang.jpg", pirce: "20" },{ name: "香芋排骨", img: "../../images/tuijian/xiangyupaigu.jpg", pirce: "18" },{ name: "灌汤包", img: "../../images/tuijian/guantangbao.jpg", pirce: "7" },{ name: "糯米鸡", img: "../../images/tuijian/nuomiji.jpg", pirce: "3" },{ name: "肠粉", img: "../../images/tuijian/changfen.jpg", pirce: "6" },{ name: "烧麦", img: "../../images/tuijian/shaomai.jpg", pirce: "12" }]

页面A的js

// 菜单详情跳转navigateTo:function(e){var img = e.currentTarget.dataset.img  //需要传递的参数var name = e.currentTarget.dataset.namevar pirce = e.currentTarget.dataset.pircewx.navigateTo({url: '/pages/xiangqing/xiangqing?img='+img  +  "&name="+name  +  "&pirce="+pirce})

代码说明：

1、监听事件: navigateTo:function(e){ }

2、需要传递的参数：var （data-的属性名字）= e.currentTarget.dataset. （data-的属性名字），例如我给data-的属性取名字是img，则代码写为var img = e.currentTarget.dataset.img ,如果需要传递多个参数，就写多个var （data-的属性名字）= e.currentTarget.dataset. （data-的属性名字），

2、携带参数跳转：wx.navigateTo({ url: ‘跳转的页面?属性=’ + 属性 }) ，如果需要携带多个参数，就用拼接的方式，例如url: ‘跳转的页面?属性1=’ + 属性1 + “&属性2=”+属性2 + “&属性3=”+属性3

页面A的wxss

/* 热门菜单 */
.tuijian-box {width: 100%;margin-top: 20rpx;display: flex;flex-direction: column;align-items: center;  /* 左右居中 */
}.tuijian-text {margin-top: 30rpx;display: flex;width: 88%;justify-content: center;  /* 居中 */font-size: 40rpx;/* background-color: blue; */
}/* 菜品图 */
.tuijian-food-box {width: 96%;display: flex;flex-wrap: wrap;justify-content: space-around;  /* 图片左右间距 */margin-bottom: 30rpx;
}.tuijian-food {border-radius: 30rpx;margin-top: 20rpx;background-color: #efefef;
}.tuijian-food image {width: 300rpx;height: 250rpx;border-radius: 20rpx;
}

到此页面A就写完了

页面B的js

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log("传递过来的参数",options);this.setData({qimg: options.img,qname: options.name,qpirce: options.pirce})},

代码说明：

1、接收页面A跳转到页面B时携带的参数，我们在生命周期函数—监听页面加载的 onload:function ( options ){ } 里面写代码来接收参数，

2、console.log(“传递过来的参数”,options); 当跳转到页面B时，你可以看到控制台打印传递过来的参数options ，

3、this.setData({ qimg: options.img }) 将传递过来的参数保存到页面B的data里面， qimg是随便取的一个名字，是用来保存数据的空数组，options.img右边的img是你在页面A的data-属性里给属性取的名字，也就是传递的参数之一，具体传递了多少参数，你可以查看控制台

如果要保存多个参数，就在this.setData里面写多个（qimg）名字: options.属性

4、在页面B的js的data里写空数组，让this.setData 保存到里面

 /*** 页面的初始数据*/data: {qimg: [],
qname: [],qpirce: []},

qimg是我在上面的空数组名字，给this.setData 保存数据的

页面B的wxml

<view> {{qimg}} </view>
<view> {{qname}} </view>
<view> {{qpirce}} </view>

代码说明：我们只需要在页面B的wxml里面用插值表达式就可以渲染出页面A跳转过来携带的参数，例如 {{ qimg }} ,qing是页面B的js的data里的数组

微信小程序页面A携带参数跳转到页面B，页面B获取页面A传来的参数并且存到data里面，在页面B中渲染成功相关推荐

uniapp开发微信小程序 wx.navigateBack()携带数据问题
uniapp开发微信小程序 wx.navigateBack()携带数据问题某个表单页面有时需要跳转另一个页面查询数据但如此想要保存当前页面数据需要在另一个查询页面调用 wx.navigateBa ...
微信小程序和H5之间互相跳转、互相传值
最近又开始写小程序了,刚好遇到微信小程序和内嵌 H5 之间来回跳转,来回交互:这里记录一下微信小程序和 H5 之间交互的实现:(我的小程序是通过 un-app 框架来写的,内部代码基本都是 vue) ...
微信小程序学习7：路由跳转 - wx.navigateTo() wx.redirectTo()...
微信小程序学习7:路由跳转 - wx.navigateTo() wx.redirectTo()- 文章目录微信小程序学习7:路由跳转 - wx.navigateTo() wx.redirectTo( ...
【微信小程序】二维码跳转规则的前缀匹配是什么意思？
前言基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...
uni微信小程序，打开地图，跳转第三方
一.需求微信小程序需要点击并跳转第三方地图软件导航,并计算到目标位置距离二.思路思路: 1.接口返回需要有位置的经纬度,这个自行在后台编辑获取 2.需要获取用户的位置权限我这边使用的是uni ...
微信小程序开发（四）跳转页面、传递参数获得数据
上一篇:微信小程序学习笔记(三) 上一篇获得博客数据如下图,现在需要实现点击博客标题或缩略图,跳转到博客详情页面. 开始想研究一下微信小程序的web-view组件跳转传参,把网页嵌入到小程序,结果看到 ...
微信小程序web-view环境下H5跳转小程序页面方法
web-view页面内的H5页面跳转至小程序页面一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰 ...
微信小程序(2) 按钮点击跳转页面
微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigate ...
微信小程序原生开发技巧及跳坑心得
常用功能 1.事件带参在微信小程序中,给事件的回调函数内部传递参数不是通过函数调用传递实参的方式传递的,而是通过在view上绑定属性,然后在回调函数的事件对象的currentTarget属性中的da ...
tomcat跳转报错_微信小程序开发：使用reLaunch跳转时报错的解决步骤
最近在做微信小程序的一个项目,遇到一个微信小程序使用reLaunch跳转的报错的问题,为了避免以后出现同款错误的再次发生,特意用一篇博文记录一下,方便查阅使用.错误再现,具体错误日志提示如下所示:VM ...

微信小程序页面A携带参数跳转到页面B，页面B获取页面A传来的参数并且存到data里面，在页面B中渲染成功

微信小程序页面A携带参数跳转到页面B，页面B获取页面A传来的参数并且存到data里面，在页面B中渲染成功相关推荐

最新文章

热门文章

微信小程序 页面A携带参数跳转到页面B，页面B获取页面A传来的参数并且存到data里面，在页面B中渲染成功

微信小程序 页面A携带参数跳转到页面B，页面B获取页面A传来的参数并且存到data里面，在页面B中渲染成功相关推荐

最新文章

热门文章

微信小程序页面A携带参数跳转到页面B，页面B获取页面A传来的参数并且存到data里面，在页面B中渲染成功

微信小程序页面A携带参数跳转到页面B，页面B获取页面A传来的参数并且存到data里面，在页面B中渲染成功相关推荐