微信小程序云开发-数据库-列表页携带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()函数,作用是点击[添加商品]按钮,跳转到[添 ...
随机推荐
- 嵌入式Linux的OTA更新,基础知识和实现
嵌入式Linux的OTA更新,第1部分-基础知识和实现 OTA updates for Embedded Linux, Fundamentals and implementation 更新的需要 一 ...
- Spring Cloud系列(一):服务注册中心
一.Spring Cloud简介 Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智能路由,微代理,控制总线).分布式系统的协调导致了样 ...
- fiddler选项卡-AutoResponder(自动响应)
AutoResponder 它可以把本来服务器响应的内容,使用本地内容来响应.这个对网站开发人员来说很有用. 1.AutoResponder界面 2.界面功能解析,根据上图标注位置 1.Enable ...
- Visual Studio 2022 Preview 1 和.NET 6 Preview 5 正式发布
具有里程碑意义的Visual Studio 2022 Preview 1正式发布,重点是64位,而没有增加新功能,并且同时也发布了.NET 6 Preview 5. https://devblogs. ...
- Python3中列表、字典、元组、集合的看法
文首,我先强调一下我是一个弱鸡码农,这个随笔是在我学习完Python3中的元组.字典.列表,集合这四种常见数据的数据类型的一些感想,如果有什么不对的地方欢迎大家予以指正.谢谢大家啦 回归正题:这篇随笔 ...
- Linux命令大全之搜索命令
文件搜索命令(只能搜索文件) locate 文件名 在后台数据库中按文件名搜索,搜索速度快 /var/lib/mlocate(locate文件数据库) 这个数据库默认一天更新一次,强制 ...
- Ubuntu安装ibmmq
一.前言 安装整个ibmmq的过程中,真的气炸了,在网上搜索到的答案千篇一律,一个安装部署文档居然没有链接地址:为了找到这个开发版本的下载地址找了一下午,不容易啊.也提醒了自己写博文还是得有责任心,把 ...
- docker4-docker网络,容器编排,集群部署
1,docker网络 1.1,docker0 有三个网络环境,那么docker是如何处理容器网络访问的? 1.2,测试 docker run -d -p 80:8080 --name tomcat01 ...
- 关于vim
全部删除:按esc后,然后dG全部复制:按esc后,然后ggyG全选高亮显示:按esc后,然后ggvG或者ggVG 在win中使用<C-a>是全选,如果需要在vim中使用<C-a&g ...
- Gym 100008E Harmonious Matrices 高斯消元
POJ 1222 高斯消元更稳 看这个就懂了 #include <bits/stdc++.h> using namespace std; const int maxn = 2000; in ...