微信小程序云开发-数据库-列表页携带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)

五、大功告成。
点击列表页中的任何一条数据,详情页显示对应的数据。



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


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

微信小程序云开发-数据库-列表页携带id跳转到详情页的更多相关文章
- 微信小程序云开发-数据库和云函数的应用-点赞/收藏/评论功能
一.准备工作 1.创建数据库表articles,字段分别为: 序号 字段名称 字段类型 字段值 字段描述 备注说明 1 title string "标题1" 文章标题 2 de ...
- 微信小程序云开发-数据库表创建和操作
一.新建云数据库 进入[云开发]界面,点击[数据库]>添加>创建集合>确定. 二.向数据库中添加数据 选中[数据库],点击[添加记录],向数据库中添加记录 添加[字段]和[值],并选 ...
- 微信小程序云开发-数据库-用户更新数据并提交
一.wxml增加input输入框和[更新商品价格]按钮 在商品详情页新增[更新商品价格]按钮,wxml新增部分代码,input绑定事件,用于获取用户输入的内容.按钮绑定事件,用于更新商品价格. 二. ...
- 微信小程序云开发-数据库-更新数据
一.js文件代码使用.update更新数据 写一个更新数据的函数,函数内使用.update更新数据.一定要通过.doc指定修改哪一条数据. 二.wxml文件修改数据的按钮 在wxml文件中写[修改] ...
- 微信小程序云开发-数据库-用户删除数据
一.在商品详情页添加[删除单条数据]按钮 进入goodDetail.wxml页面,添加[删除单条数据]按钮,绑定点击事件removeGood() 二.进入goodDetail.js文件,定义remo ...
- 微信小程序云开发-数据库-商品列表数据排序
一.wxml添加升序和降序 在商品列表的wxml文件中添加超链接a标签,分别用于升序和降序的点击.分别绑定升序和降序的点击事件. 二.js文件实现升序和降序 分别写对应的按价格升序函数sortByPr ...
- 微信小程序云开发-数据库-商品列表数据跳过N条数据
一.WXML实现 在wxml文件中添加对应链接,点击链接绑定事件skipGoods. 二.js实现 js文件中写skipGoods()函数,实现跳过2条数据的功能.
- 微信小程序云开发-数据库-商品列表数据显示N条数据
一.wxml文件 在wxml文件中,写页面和点击事件,添加绑定事件limitGoods 二.js文件 在js文件中写limitGoods(),使用.limit(3)表示只显示3条数据
- 微信小程序云开发-数据库-获取用户添加的数据到数据库
一.列表页面新增[添加商品]按钮 在列表页增加[添加商品]按钮,按钮绑定事件toAdd(),用户点击该按钮跳转到添加商品页面. 在js文件中写toAdd()函数,作用是点击[添加商品]按钮,跳转到[添 ...
随机推荐
- 基于ARM Cortex-M的SoC存储体系结构和实战
基于ARM Cortex-M的SoC存储体系结构和实战 System on Chip Architecture Tutorial Memory Architecture for ARM Cortex- ...
- Mask R-CNN用于目标检测和分割代码实现
Mask R-CNN用于目标检测和分割代码实现 Mask R-CNN for object detection and instance segmentation on Keras and Tenso ...
- vue中dom节点转图片
今天项目中有个需求,需要将页面的一部分转为图片,相当于存证之类的 然后我查阅了下百度,发现了几种可行的方法,特此来记录下 1.html2canvas插件 安装:npm install --save h ...
- JUC 并发编程--08,线程池,三大方法,七大参数,4种拒绝策略,代码演示
三大方法: //线程池核心线程数为n, 最大线程数为 n ExecutorService fixedThreadPool = Executors.newFixedThreadPool(n); 源码: ...
- 【NX二次开发】多功能对话框UF_UI_message_dialog
多功能对话框 1 extern DllExport void ufsta(char *param, int *returnCode, int rlen) 2 { 3 UF_initialize(); ...
- 【NX二次开发】调整视图大小
调整视图大小 tag_t tagView; UF_VIEW_ask_work_view(&tagView); UF_VIEW_fit_view(tagView, 0.7);//if NULL_ ...
- Golang Heap 源码剖析
堆原理解析 堆一般指二叉堆.是使用完全二叉树这种数据结构构建的一种实际应用.通过它的特性,分为最大堆和最小堆两种. 如上图可知,最小堆就是在这颗二叉树中,任何一个节点的值比其所在子树的任意一个节点都要 ...
- 解Bug之路-ZooKeeper集群拒绝服务
解Bug之路-ZooKeeper集群拒绝服务 前言 ZooKeeper作为dubbo的注册中心,可谓是重中之重,线上ZK的任何风吹草动都会牵动心弦.最近笔者就碰到线上ZK Leader宕机后,选主无法 ...
- k8s-nginx二进制报Illegal instruction (core dumped)
1.环境 系统:CentOS 7.3 内核:x86 环境:虚拟机 2.问题 收到一个现场问题,k8s环境中nginx的pod都启动异常. #kubectl get pod |grep nginx ng ...
- MAT工具定位分析Java堆内存泄漏问题方法
一.MAT概述与安装 MAT,全称Memory Analysis Tools,是一款分析Java堆内存的工具,可以快速定位到堆内泄漏问题.该工具提供了两种使用方式,一种是插件版,可以安装到Eclips ...