微信小程序云开发-云存储-带图片的商品列表携带id跳转至商品详情

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、商品列表页

1.wxml文件

在view中添加点击事件goToGoodDetail，绑定数据data-id

<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.效果图