uniapp查看文章实现图片预览效果

qq_Girl200

已于 2023-12-04 16:53:14 修改

阅读量624

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： uni-app 前端 javascript

于 2023-10-31 15:12:39 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42103673/article/details/134140996

uniapp 专栏收录该内容

9 篇文章

订阅专栏

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;
			}