微信小程序-页面之间跳转传值与取值(商品简介到详情跳转示例)

以商品简介界面跳转到商品详情界面为例子讲解,下面例子对应的界面就是home.wxml跳转到goodsDetail.wxml。


1.在简介界面的wxml中使用data-xxx进行传值

data-goodsid="{{item.id}}" 即是数组每项中的id字段。
在这里插入图片描述

2.编写点击事件,取值并跳转

刚刚在wxml里bindtap了一个名为goGoodsDetail的点击事件。
在这个跳转函数中,使用e.currentTarget.dataset.goodsid获取到了刚刚在wxml里写的item.id值。
获取到值后,使用wx.navigateTo带参数传值跳转。
在这里插入图片描述

3.在详情界面中接收传过来的ID值

在onLoad生命周期函数中,使用options.id即可接收到刚刚wx.navigateTo带的id参数,然后进行setData赋值。后续就可以通过id来查询商品对应的详情信息了。获取到数组再进行页面渲染。(我这里是死数据,就不演示了)
(注意这里是options.id,如果搞不清楚,建议console.log(options)打印出来看看)
在这里插入图片描述

以上就是微信小程序,从一个页面传值到另一个页面接收并赋值的具体方法。

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值