微信小程序云开发-云存储-带图片的商品列表携带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跳转至商品详情

推荐阅读