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

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

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

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

列表页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进行渲染，
将数据填到里面，就可以达到在列表页点击页面就可以跳转到指定详情页的效果了