图片预览——uni.previewImage和自定义

效果图

可以左右滑动，或者点击页面左右的切换图标

代码展示

一·使用uni.previewImage

postConent.pictureList：图片列表

 item.img：图片

（this. $config.getConfig().wallBasePath + item.img，这是我项目中所需要的，使用了拼接来实现图片展示）

<view class="image-list" v-if="postConent.pictureList && postConent.pictureList.length">
			<view class="image-item" v-for="(item, index) in postConent.pictureList" :key="index"
				@click="previewImage(index)">
				<image :src='this. $config.getConfig().wallBasePath + item.img' />
			</view>
		</view>

	previewImage(index) {
				const currentIndex = Number(index)
				const currentImage = this.postConent.pictureList[currentIndex].img
				uni.previewImage({
					current: this.$config.getConfig().wallBasePath + currentImage,
					indicator: currentIndex,
					urls: this.postConent.pictureList.map(item => this.$config.getConfig().wallBasePath + item
						.img)
				});
			},

	.image-list {
		margin-top: 12rpx;
		display: flex;
		flex-wrap: wrap;

		.image-item {
			width: 186rpx;
			height: 186rpx;
			margin: 0 12rpx 12rpx 0;

			image {
				border-radius: 4rpx;
				width: 186rpx;
				height: 186rpx;
			}
		}

		.image-item:nth-of-type(3n) {
			margin-right: 0;
		}
	}

二·使用自定义函数

	previewImage() {
		const imgUrl = props.data.picture;
		const img = new Image();
		img.src = imgUrl;
		img.onload = function() {
			// 创建一个模态框来展示图片  
			const modal = document.createElement('div');
			modal.style.position = 'fixed';
			modal.style.top = '0';
			modal.style.left = '0';
			modal.style.width = '100%';
			modal.style.height = '100%';
			modal.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
			modal.style.display = 'flex';
			modal.style.alignItems = 'center';
			modal.style.justifyContent = 'center';
			modal.style.zIndex = '9999';

			const modalImg = document.createElement('img');
			modalImg.src = imgUrl;
			modalImg.style.maxWidth = '100%';
			modalImg.style.maxHeight = '90%';
			modal.appendChild(modalImg);

			document.body.appendChild(modal);

			modal.addEventListener('click', function(e) {
				document.body.removeChild(modal);
			});

		};

		img.onerror = function() {
			console.error('Failed to load image:', imgUrl);
		};
	}