微信小程序(路由及组件跳页传参)

目录

  • (1)API路由跳页传参
  • (2)navigator导航组件跳页传参

API路由跳页传参

  • 商品列表展示页
    在这里插入图片描述
  • 商品展示页编写
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 回到商城列表展示页,如果跳页时直接传参,会发现黄色警告,无法跳页
    在这里插入图片描述

小程序事件传递参数

  • 小程序事件传递参数
  • 在小程序中,给元素绑定事件不能直接传递参数,如果写成
    在这里插入图片描述
  • 正解:
  • ①给元素绑定自定义属性data-item=”{{item}}”
  • ②在js中通过事件对象获取event.currentTarget.dataset.item
  • 所以接下来做下调整,添加自定义属性data-***,然后在js中通过事件对象获取
  • 语法:event.currentTarget.dataset.自定义属性名
    在这里插入图片描述
  • JS中通过event.currentTarget.dataset.item获取,然后拼接到url后面
  • 参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔
    在这里插入图片描述
  • 这里补充说明下路由跳转API的相关参数
    在这里插入图片描述
  • 商城页面传参后在详情页接收参数
    在这里插入图片描述
    在这里插入图片描述

navigator组件跳页传参

  • 除了使用路由API跳页传参外,使用导航组件navigator进行跳页时,也可以传参,直接往url里拼写即可。
    在这里插入图片描述
完毕!

如有疑问请随时联系小编

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值