#小程序# 从商品列表页跳转到相应的商品详情页

商品列表页跳转到相应的商品详情页"/>

#小程序# 从商品列表页跳转到相应的商品详情页

#小程序# 从商品列表页跳转到相应的商品详情页

需求：
从商品列表页，跳转到指定的商品详情页

思路:
首先写好商品列表的一个内容样式（类似于一个小卡片），
然后通过循环，将数据传入到里面，循环出来

列表页wxml

 <scroll-view scroll-y="true"><view class="mask-list" ><view  class="mask-list-details" wx:for="{{masklist}}"data-id="{{item.id}}" bindtap="maskClick" ><view class="mask-img"><image src="{{item.img}}"></image></view><view class="mask-title">{{item.title}}</view><view class="mask-mag"><view class="mask-price">{{item.price}}</view><van-icon class="goods-detail-icon" name="cart-circle" color="red" /></view></view></view></scroll-view>  

列表页js

	Page({/*** 页面的初始数据*/data: {checked: true,fileList: [],date: '',show: false,masklist:[{ img:'/assets/barbar/img/cos1.png',title:'香薰 日往月来【树德原创】',price:'￥99.50',id: 1},{ img:'/assets/barbar/img/cos2.png',title:' UFO音乐盒《树德原创》 UFO音乐盒【树德原创】',price:'￥79.50',id: 2},{ img:'/assets/barbar/img/cos3.png',title:'KN95树德口罩防尘颗粒 友谊的小船【树德原创】',price:'￥49.50',id: 3},{ img:'/assets/barbar/img/cos4.png',title:'大象兔子音乐盒 独立装69个/盒（送蜂巢口罩）【树德原创】',price:'￥39.50',id: 4},{ img:'/assets/barbar/img/cos5.png',title:'KN95树德口罩 甜蜜的私奔（送蜂巢口罩）【树德原创】',price:'￥99.50',id: 5},{ img:'/assets/barbar/img/cos6.png',title:'车载小蘑菇 独立装45个/盒（送蜂巢口罩）【树德原创】',price:'￥79.50',id:6},{ img:'/assets/barbar/img/cos7.png',title:'KN95树德口罩防尘颗粒  猪猪相印钥匙扣【树德原创】',price:'￥59.50',id:7},{ img:'/assets/barbar/img/cos8.png',title:'十二生肖不倒翁 【树德原创】',price:'￥39.50',id:8},{ img:'/assets/barbar/img/cos9.png',title:'KN95树德口罩防尘颗粒 独立装45个/盒（送蜂巢口罩）【树德原创】',price:'￥19.50',id:9},{ img:'/assets/barbar/img/cos10.png',title:'KN95树德口罩防尘颗【树德原创】',price:'￥29.50',id:10},]},maskClick(e) {var p = e.currentTarget.dataset.id;wx.navigateTo({url: '/pages/detail/detail?id=' + p });},

列表页wxss

.mask-list {width: 710rpx;margin: 20rpx auto 20rpx ;}
.mask-list-details {display: inline-block;width: 345rpx;height: 600rpx;margin-right: 20rpx;margin-bottom: 20rpx;
}
.mask-list-details:nth-child(2n) {margin-right: 0;
}
.mask-list-details .mask-img {width: 100%;height: 400rpx;
}
.mask-list-details .mask-img image {width: 100%;height: 100%;
}
.mask-list-details .mask-title {color:#000;font-size: x-small;font-weight: 500;overflow: hidden;text-overflow: ellipsis;display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; padding-top: 30rpx;padding-bottom: 20rpx;
}
.mask-list-details .mask-mag {width: 100%;height: 90rpx;display: flex;
}
.mask-list-details .mask-mag .mask-price {font-size: medium;color: #C72121;line-height: 90rpx;padding-right:110rpx;
}
.mask-list-details .mask-mag .goods-detail-icon {font-size: x-large;
}

然后，我们要先写好一个详情页的模板，
到时候点击任意一个列表页，列表页都会把自己的id传到服务器，进行请求接口。
在详情页里面，排好版，再通过wx:for进行渲染，
将数据填到里面，就可以达到在列表页点击页面就可以跳转到指定详情页的效果了