话不多说上代码
1.首先在wxml中放入若干图片,可以用 wx:for 导入若干图片
<view class= "card" wx:for = "{{dataList}}">
//点击跳转详情页面,并携带id
<view bindtap="goDetail" data-id="{{item._id}}">
//展示若干图片
<view>
<image class= "image2" mode="aspectFill" src="{{item.imgUrl}}"/>
</view>
</view>
</view>
2. 在js部分 先创造一个文件名为image文件夹
goDetail:function(e){
console.log(e.currentTarget.dataset.id)
wx.navigateTo({
//url部分为跳转页面
url: '../image1/image1?id=' +e.currentTarget.dataset.id,
})
},
3.最后是wxss部分 主要用了 position: absolute; 来覆盖下方的图片
page{
background:white;
}
/* 卡片 */
.item-container {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 92%;
margin:4%;
display: flex;
flex-direction: column;
background: white;
padding-top: 5pt;
padding-bottom: 5pt;
border-radius: 5px;
}
}
/**另一个**/
.card {
border: 2px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 5px 5px #cccccc;
margin: 8px;
position: relative;
}
.image2{
width:100%;
height:240px;
position: absolute;
}