一、新建页面

新建列表页"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. Bind DNS服务——基础知识

    Linux基础--Bind DNS服务 Part0 DNS简介 域名系统(英语:Domain Name System,缩写:DNS)是互联网的一项服务.它作为将域名和IP地址相互映射的一个分布式数据库 ...

  2. 这 7 个 Linux 命令,你是怎么来使用的?

    使用 Linux 系统的开发者,很多人都有自己喜欢的系统命令,下面这个几个命令令是我平常用的比较多的,分享一下. 我不会教科书般的罗列每个指令的详细用法,只是把日常开发过程中的一些场景下,经常使用的命 ...

  3. 从Vehicle-ReId到AI换脸,应有尽有,解你所惑

    最近在做视频搜索的技术调研,已经初步有了一些成果输出,算法准确性还可以接受,基本达到了调研的预期.现将该技术调研过程中涉及到的内容总结一篇文章分享出来,内容比较多,初看起来可能关系不大,但是如果接触面 ...

  4. HAOI2008 木棍分割 数据结构优化dp+二分答案

    很久之前打的题,现在补篇博客 打滚动数组 #E. 木棍分割 Accepted 100 1712 ms 1512 KiB   2019-05-07 17:01:23 Short 不打滚动数组 #419. ...

  5. Web 动画原则及技巧浅析

    在 Web 动画方面,有一套非常经典的原则 -- Twelve basic principles of animation,也就是关于动画的 12 个基本原则(也称之为迪士尼动画原则),网上对它的解读 ...

  6. Mysql优化(出自官方文档) - 第七篇

    Mysql优化(出自官方文档) - 第七篇 目录 Mysql优化(出自官方文档) - 第七篇 Optimizing Data Change Statements 1 Optimizing INSERT ...

  7. js-动态表单校验-吐血总结最近遇到的变态表单校验2---element+原生

    上一部分总结了基础常用的js表单校验,包括原生以及框架,下面来总结这一个月涉及到的动态校验: 动态表单校验大致分为三种情况: 1. 首先是固定校验规则,但是表单组件是动态生成的,例如:在表单或者表格里 ...

  8. excel VBA把一个单元格内容按逗号拆分并依次替换到另一个单元格的括号里面(本题例子,把文本中的括号换成{答案}的格式,并按顺序填空)

    方法1:运用excel单元格拆分合并实现 思路:用VBA正则查询左侧括号个数,对右侧单元格逐一按逗号.顿号等符号分列,同时左侧按括号分列(分列只能按括号单边分列),分列完成后按要求合并,本题事例把括号 ...

  9. 通过busybox制作根文件系统详细过程

    我在之前的uboot通过NFS挂载ubuntu根文件系统中也有实现过根文件系统的制作,那只是在ubuntu官网已经做好的根文件基础上安装一些自己所需的软解而已.而使用busybox制作根文件系统可以自 ...

  10. 13 Nginx访问日志分析

    #!/bin/bash export PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin # Nginx 日志格式: # ...