1.将图片数据循环并添加magnifyImag事件显示弹框
u-swiper绑定的数组为图片url数组
//第一种
<view class="profileDetail">
<view class="picList">
<scroll-view class="scroll-view_H" :scroll-x="true" scroll-left="0">
<u-image v-for="(item, index) in rmImagList" :key="index" class="scroll-view-item_H" width="260rpx" height="156rpx" :src="item" @click="magnifyImag(item)"></u-image>
</scroll-view>
<u-popup v-model="showBigImag" mode="center" :zoom="false">
<view class="" style="width: 690rpx; height: 486rpx;">
<u-swiper :list="rmImagList" height="486"></u-swiper>
</view>
</u-popup>
</view>
</view>
//第二种写法:
<view class="img_box" v-for="(it,index) in imgList" :key="index">
<image :src="it" mode="aspectFill" @click="magnifyImag(it)">
</image>
</view>
<u-popup v-model="showBigImag" mode="center" :zoom="false">
<view class="" style="width: 690rpx; height: 486rpx;">
<u-swiper :list="imgList" height="486"></u-swiper>
</view>
</u-popup>
.profileDetail {
line-height: 48rpx;
margin: 20rpx 0;
.picList {
width: 100%;
display: flex;
.u-image {
flex: 1;
margin: 0 10rpx 10rpx;
}
}
img {
width: 100%;
height: auto;
margin-top: 20rpx;
}
}
.scroll-view_H {
display: flex;
flex-direction: row;
white-space: nowrap;
width: 100%;
}
.scroll-Y {
height: 300rpx;
}
.scroll-view-item {
text-align: center;
font-size: 36rpx;
}
.scroll-view-item_H {
display: inline-block;
text-align: center;
font-size: 36rpx;
}
2.点击显示弹窗,并复制当前点击的图片放大
magnifyImag(imgSrc) {
this.showBigImag = !this.showBigImag;
//this.bigImagSrc = imgSrc;
}