微信小程序云开发-列表页携带id跳转到详情页

本文主要是介绍微信小程序云开发-列表页携带id跳转到详情页，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、新建页面

新建列表页"pages/goodslist/goodslist"，新建列表详情页"pages/gooddetail/gooddetail"

二、列表页显示商品列表

1.js文件，查询商品信息，并将查询到的商品信息存放到自定义数组goodslist[]中

2.wxml文件。for循环遍历数组goodslist[]，将数组中所有字段的信息展示在页面上

三、列表页绑定跳转事件

1.wxml文件。想要携带id跳转页面，需要在需要跳转的页面wxml文件中添加bindtap绑定跳转事件（自定义函数goDetail()函数实现），一定要添加data-id="{{item._id}}"，data-id名称中的id是自己定义的，也可以改为其他名字。

2.js文件。携带id跳转页面的事件。

四、商品详情页展示

1.wxml文件商品详情信息

2.js文件，页面加载的时候，获取列表页传递过来的id值，拿到id后（options.id），将拿到的id付给自定义的id（var id = options.id）。将自定义的id赋值给查询条件.doc(id)

五、大功告成。

点击列表页中的任何一条数据，详情页显示对应的数据。

这篇关于微信小程序云开发-列表页携带id跳转到详情页的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

微信公众号开发