一、新建页面

新建列表页"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)

、大功告成。

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

注意:

【注意事项1】goodlist.js中的id是获取当前点击的商品的id值。gooddetail.js中的option.id中的id是页面加载时获取goodlist页面的id。两个id名称可以换成别的,但是一定要保持一致!

【注意事项2】gooddetail中传输的id就是自定义的id,可以是其他名字。

微信小程序云开发-数据库-列表页携带id跳转到详情页的更多相关文章

  1. 微信小程序云开发-数据库和云函数的应用-点赞/收藏/评论功能

    一.准备工作 1.创建数据库表articles,字段分别为: 序号 字段名称 字段类型 字段值 字段描述 备注说明 1 title string "标题1" 文章标题   2 de ...

  2. 微信小程序云开发-数据库表创建和操作

    一.新建云数据库 进入[云开发]界面,点击[数据库]>添加>创建集合>确定. 二.向数据库中添加数据 选中[数据库],点击[添加记录],向数据库中添加记录 添加[字段]和[值],并选 ...

  3. 微信小程序云开发-数据库-用户更新数据并提交

    一.wxml增加input输入框和[更新商品价格]按钮 在商品详情页新增[更新商品价格]按钮,wxml新增部分代码,input绑定事件,用于获取用户输入的内容.按钮绑定事件,用于更新商品价格.  二. ...

  4. 微信小程序云开发-数据库-更新数据

    一.js文件代码使用.update更新数据 写一个更新数据的函数,函数内使用.update更新数据.一定要通过.doc指定修改哪一条数据.  二.wxml文件修改数据的按钮 在wxml文件中写[修改] ...

  5. 微信小程序云开发-数据库-用户删除数据

    一.在商品详情页添加[删除单条数据]按钮 进入goodDetail.wxml页面,添加[删除单条数据]按钮,绑定点击事件removeGood()  二.进入goodDetail.js文件,定义remo ...

  6. 微信小程序云开发-数据库-商品列表数据排序

    一.wxml添加升序和降序 在商品列表的wxml文件中添加超链接a标签,分别用于升序和降序的点击.分别绑定升序和降序的点击事件. 二.js文件实现升序和降序 分别写对应的按价格升序函数sortByPr ...

  7. 微信小程序云开发-数据库-商品列表数据跳过N条数据

    一.WXML实现 在wxml文件中添加对应链接,点击链接绑定事件skipGoods. 二.js实现 js文件中写skipGoods()函数,实现跳过2条数据的功能.

  8. 微信小程序云开发-数据库-商品列表数据显示N条数据

    一.wxml文件 在wxml文件中,写页面和点击事件,添加绑定事件limitGoods  二.js文件 在js文件中写limitGoods(),使用.limit(3)表示只显示3条数据

  9. 微信小程序云开发-数据库-获取用户添加的数据到数据库

    一.列表页面新增[添加商品]按钮 在列表页增加[添加商品]按钮,按钮绑定事件toAdd(),用户点击该按钮跳转到添加商品页面. 在js文件中写toAdd()函数,作用是点击[添加商品]按钮,跳转到[添 ...

随机推荐

  1. Docker-compose搭建ELK环境并同步MS SQL Server数据

    前言 本文作为学习记录,供大家参考:一次使用阿里云(Aliyun)1核2G centos7.5 云主机搭建Docker下的ELK环境,并导入MS SQL Server的商品数据以供Kibana展示的配 ...

  2. Java基础_循环嵌套_打印乘法口诀、菱形,各种图形,计算二元一次和三元一次方程组_7

    循环嵌套 打印乘法口诀 for(int j=1;j<=9;j++){ for(int i=1;i<=j;i++){ System.out.print(i+"*"+j+& ...

  3. js正则中文

    hi,大家好 今天跟小伙伴们浅谈以下如何用正则表示中文以及如何去运用.众所周知中文在计算机中是不能进行存储的.那我们是以什么办法让我们和计算机进行更好的沟通呢?常用的几种中文编码格式utf-8编码ut ...

  4. CSS3-过渡、动画、2D与3D

    过渡 过渡属性transition,可适用于大部分属性间变化的过渡,例如长度的.宽度和透明度等等. 语法: transition: property duration timing-function ...

  5. Servlet--核心内容汇总

    Servlet汇总 因为看公司代码,有个cookie+jwt.Token登录验证接口,于是回顾下servlet.cookie.session.前后端分离restful.jwt.token相关内容.虽然 ...

  6. 在VScode 中使用RT-Thread Studio初体验

    前言 工欲善其事,必先利其器,VScode是什么东东,想必大家都非常熟悉了,丰富的插件,有好的开发界面,是很多程序开发者的不二之选,RT-Thread竟然也开发了Vscode插件,真的是非常的nice ...

  7. oracle中如何处理null

    从两个表达式返回一个非 null 值.语法NVL(eExpression1, eExpression2)参数eExpression1, eExpression2如果 eExpression1 的计算结 ...

  8. bzoj2839 集合计数(容斥+组合)

    集合计数 内存限制:128 MiB 时间限制:1000 ms 标准输入输出     题目描述 一个有N个元素的集合有2^N个不同子集(包含空集),现在要在这2^N个集合中取出若干集合(至少一个),使得 ...

  9. open数据库报错ERROR at line 1: ORA-03113: end-of-file on communication channel Process ID: 3880 Session ID: 125 Serial number: 3

    1.今天打开数据时,失败,报错 ERROR at line 1:ORA-03113: end-of-file on communication channelProcess ID: 3880Sessi ...

  10. external-provisioner源码分析(3)-组件启动参数分析

    更多ceph-csi其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 external-provisioner源码分析(3)-组件启动参数分析 本文将对extern ...