1、UI部分
<view class="view-box" v-for="(item,index) in workCertificate" :key="index">
<image class="icon" :src="item.url" @click="imgPreview(index,workCertificate)"></image>
<text class="title">{{item.type}}</text>
</view>
2、js部分
data() {
return {
workCertificate:[
{type:"上岗证",url:"https://cdn.uviewui.com/uview/album/1.jpg"},
{type:"上岗证",url:"https://cdn.uviewui.com/uview/album/2.jpg"},
{type:"上岗证",url:"https://cdn.uviewui.com/uview/album/3.jpg"},
{type:"上岗证",url:"https://cdn.uviewui.com/uview/album/4.jpg"},
{type:"上岗证",url:"https://cdn.uviewui.com/uview/album/5.jpg"},
{type:"上岗证",url:"https://cdn.uviewui.com/uview/album/6.jpg"},
]
}
},
//方法部分
imgPreview(index,picList) {
//预览图片
let urlList=[]
picList.forEach((value)=>{
urlList.push(value.url)
})
let that = this
uni.previewImage({
current: index,
urls: urlList
})
},
3、css部分
.view-box {
display: flex;
flex-direction: column;
justify-content: left;
align-items: left;
background-color: #fff;
float: left;
padding: 15rpx;
}
.icon {
width: 30vw;
height: 30vw;
}
.title {
margin-top: -45rpx;
width: 30vw;
font-size: 20upx;
background-color: rgba(128,128,128,0.5);
z-index:999;
color: #ffffff;
text-align:center
}