编程语言
首页 > 编程语言> > 微信小程序云开发-列表页携带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)

 

 

、大功告成。

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

 

标签:goodslist,自定义,微信,列表,详情页,跳转,id,页面
来源: https://www.cnblogs.com/AnnLing/p/15010258.html