微信小程序(路由及组件跳页传参)
分类:
文章
•
2023-12-30 12:00:40
目录
- (1)API路由跳页传参
- (2)navigator导航组件跳页传参
API路由跳页传参
- 商品列表展示页
- 商品展示页编写
![微信小程序(路由及组件跳页传参) 微信小程序(路由及组件跳页传参)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzc3Mi82MmFkMzlmNWE4MjYxZGQ0MTFkNTA1YzViYTY2YmIzYy5wbmc=)
![微信小程序(路由及组件跳页传参) 微信小程序(路由及组件跳页传参)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzI4NS80Y2E5NzI1ZDc5MzgxZWY1YzA5MTk4YWVlNTRlNGVmZC5wbmc=)
![微信小程序(路由及组件跳页传参) 微信小程序(路由及组件跳页传参)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzc0My8yNjViZjkwOTM5MTc0NjljMmVlMDU3ZDg2MjMwNjg1Ny5wbmc=)
-
回到商城列表展示页,如果跳页时直接传参,会发现黄色警告,无法跳页
小程序事件传递参数
- 小程序事件传递参数
- 在小程序中,给元素绑定事件不能直接传递参数,如果写成
- 正解:
- ①给元素绑定自定义属性data-item=”{{item}}”
- ②在js中通过事件对象获取event.currentTarget.dataset.item
- 所以接下来做下调整,添加自定义属性data-***,然后在js中通过事件对象获取
- 语法:event.currentTarget.dataset.自定义属性名
- JS中通过event.currentTarget.dataset.item获取,然后拼接到url后面
- 参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔
- 这里补充说明下路由跳转API的相关参数
- 商城页面传参后在详情页接收参数
![微信小程序(路由及组件跳页传参) 微信小程序(路由及组件跳页传参)](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE3Ni81MTA4NTcwNTY4MjcyYmYxMDc2MDNjZTk1ZGIzOWU0OC5wbmc=)
navigator组件跳页传参
- 除了使用路由API跳页传参外,使用导航组件navigator进行跳页时,也可以传参,直接往url里拼写即可。
完毕!
如有疑问请随时联系小编