微信小程序云开发-云存储-带图片的商品列表携带id跳转至商品详情
一、商品列表页
1.wxml文件
在view中添加点击事件goToGoodDetail,绑定数据data-id
<!-- 添加点击事件goToGoodDetail -->
<view wx:for="{{list}}" class="list" bindtap="goToGoodDetail" data-id="{{item._id}}">
<image src="{{item.image}}" class="image"></image>
<text>商品名称:{{item.name}}</text>
<text>商品价格:{{item.price}}</text>
</view>
2、js文件
在js文件中写goToGoodDetail()函数,实现点击列表数据携带id跳转到详情页
//跳转至商品详情页
goToGoodDetail(e){
console.log("携带的id为",e.currentTarget.dataset.id);
wx.navigateTo({
url: '/pages/goodImgDetail/goodImgDetail?id='+e.currentTarget.dataset.id, //携带id跳转
})
}
二、商品详情页
1.wxml文件
<image src="{{detail.image}}"></image>
<text>商品名称:{{detail.name}}</text>,
<text>商品价格:{{detail.price}}</text>
2.wxss文件
image{
width: 100%;
}
3.js文件
Page({
onLoad(options){
console.log(options);
wx.cloud.database().collection("goods")
.doc(options.id)
.get()
.then(res=>{
console.log("请求成功",res);
this.setData({
detail:res.data
})
})
.catch(err=>{
console.log("请求失败",err);
})
}
})
4.效果图
微信小程序云开发-云存储-带图片的商品列表携带id跳转至商品详情的更多相关文章
- 微信小程序+腾讯云直播的实时音视频实战笔记
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- 微信小程序腾讯云php后台解决方案
微信小程序腾讯云php后台解决方案 微信小程序前段需要添加必要的文件以配合后端 (1)wafer2-client-sdk sdk提供了几种接口包括登陆,获取用户openid,图片上传等 (2)conf ...
- 微信小程序-视频教程-百度云-下载
链接: https://pan.baidu.com/s/16WGL3whutozx-UXqsDPhhA 提取码: 关注公众号[GitHubCN]回复获取 什么是微信小程序?小程序是一种不需要下载安 ...
- 小程序语音红包开发中 汉字转拼音的问题 微信小程序红包开发遇到的坑
公司最近在开发微信小程序的红包功能,语音红包需要用到文字转拼音的功能. 之前介绍过怎么将中文的汉字转为拼音的,具体看下面这篇文章. 微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信 ...
- 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买
作者图书京东链接,请点击------>>> **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...
- 微信小程序快速开发
微信小程序快速开发 一.注册小程序账号,下载IDE 1.官网注册https://mp.weixin.qq.com/,并下载IDE. 2.官方文档一向都是最好的学习资料. 注意:1)注册账号之后会有一个 ...
- 【微信小程序】开发实战 之 「配置项」与「逻辑层」
微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结 ...
- BeautyWe.js 一套专注于微信小程序的开发范式
摘要: 小程序框架... 作者:JerryC 原文:BeautyWe.js 一套专注于微信小程序的开发范式 Fundebug经授权转载,版权归原作者所有. 官网:beautywejs.com Repo ...
- Django微信小程序后台开发教程
本文链接:https://blog.csdn.net/qq_43467898/article/details/83187698Django微信小程序后台开发教程1 申请小程序,创建hello worl ...
随机推荐
- Java基础_循环嵌套_打印乘法口诀、菱形,各种图形,计算二元一次和三元一次方程组_7
循环嵌套 打印乘法口诀 for(int j=1;j<=9;j++){ for(int i=1;i<=j;i++){ System.out.print(i+"*"+j+& ...
- JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究
这一章通过JavaScript图片库案例,学习了一些DOM属性. HTML代码 <!DOCTYPE html> <html> <head> <meta cha ...
- 【转】【NX二次开发】UFUN进度中断,单击停止可中断此操作
队长的博客: https://www.cnblogs.com/nxopen2018/p/13174207.html 显示此对话框,点击可中断操作: 用到的ufun函数: UF_ABORT_ask_fl ...
- Redis五种基础与三种高级数据结构解析
记得点赞+关注呦. 前言 在 Redis 最重要最基础就属 它丰富的数据结构了,Redis 之所以能脱颖而出很大原因是他数据结构丰富,可以支持多种场景.并且 Redis 的数据结构实现以及应用场景在面 ...
- .NET Core/.NET5/.NET6 开源项目汇总1:常用必备组件
系列目录 [已更新最新开发文章,点击查看详细] 开源项目是众多组织与个人分享的组件或项目,作者付出的心血我们是无法体会的,所以首先大家要心存感激.尊重.请严格遵守每个项目的开源协议后再使用.尊 ...
- Redis分布式锁 (图解-秒懂-史上最全)
文章很长,而且持续更新,建议收藏起来,慢慢读! 高并发 发烧友社群:疯狂创客圈(总入口) 奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : 极致经典 + 社群大片好评 < Java 高并发 三 ...
- DOS命令行(9)——wmic-系统管理命令行工具
wmic 介绍与语法 WMI(Windows Management Instrumentation,Windows 管理规范)是一项核心的 Windows 管理技术:用户可以使用 WMI 管理本地和远 ...
- 撸了几天的sofa-tracer之后,我悟了!
什么是分布式链路跟踪 简而言之,在分布式系统下,用于跟踪链路而衍生出的一项技术. 应用场景如下: 应用A,B,C,D,E 以一个层级关系依赖, 当用户向 应用A 发起请求,但是返回了个异常,为了排查这 ...
- OO unit2 summary
Unit2 一.第一次作业 1.UML 2.Sequence Diagram 3.同步块设置与锁处理 采用了生产者-消费者模式,用共享对象来连接不同的线程. 第一次作业中,我有三个线程:Receive ...
- 3-Partition 问题
这是算法考试的最后一题,当时匆匆写了个基于 Subset Sum 的解法,也没有考虑是否可行. 问题描述如下: 给定 \(n\) 个正整数 \(a_1 \dots a_n\) ,设下标的整数集合 \( ...