微信小程序云开发-数据库-列表页携带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()函数,作用是点击[添加商品]按钮,跳转到[添 ...
随机推荐
- .NET平台系列21:云原生时代 .NET5 雄霸天下
系列目录 [已更新最新开发文章,点击查看详细] 随着互联网持续高歌猛进,相关技术名词也是层出不穷.微服务.容器化.DevOps.ServerLess.FaaS,这两年最火的当属云原生Cloud ...
- 计算机网络-vlan划分
1.VLAN的划分 (1)基于端口的VLAN: 交换机A上的1,2端口和交换机B上的3,4端口构成一个VLAN. 交换机A上的3,4端口和交换机B上的1,2端口构成一个VLAN. (2)基于MAC地址 ...
- Appium UI自动化测试
#coding:utf-8 from appium import webdriver import time,traceback ''' desired_capabilities:这些键告诉appiu ...
- 【NX二次开发】Block UI OrientXpress
属性说明 属性 类型 描述 常规 BlockID String 控件ID Enable Logical 是否可操作 Group ...
- 代码实测:给redis中的key取一个正确的名字多么重要
redis对写入的key长度有限制吗? 太长的key对性能有影响吗? key越长对性能影响越大? 如何评估键长度对性能的影响? talk is cheap, show me the code! 今天我 ...
- 手写Spring Config,最终一战,来瞅瞅撒!
上一篇说到了手写Spring AOP,来进行功能的增强,下面本篇内容主要是手写Spring Config.通过配置的方式来使用Spring 前面内容链接: 我自横刀向天笑,手写Spring IOC容器 ...
- 【CSAPP】以CTFer的方式打开BufferLab
[WARNING] 本文是对CSAPP附带的Buffer Lab的究极指北,PWN小白趁机来练习使用pwntools和gdb && 用老朋友IDA查看程序逻辑(可以说是抄小路了x. L ...
- 【Azure 应用服务】Azure Function集成虚拟网络,设置被同在虚拟网络中的Storage Account触发,遇见Function无法触发的问题
一切为了安全,所有的云上资源如支持内网资源访问,则都可以加入虚拟网络 问题描述 使用Azure Function处理Storage Account中Blob 新增,更新,删除等情况.Storage A ...
- 飞扬起舞,基于.Net Cli亲手打造.Net Core团队的项目脚手架
什么是脚手架? Scaffolding is a meta-programming method of building database-backed software applications. ...
- 38、mysql数据库(pymysql及事务)
38.1.python之pymysql模块: 1.说明: pymsql是Python中操作MySQL的模块,其使用方法和py2的MySQLdb几乎相同. 2.模块安装: pip install pym ...