一、商品列表页
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.效果图
