uniapp小程序预览多张图片

 

					<view class="bottom_box">
						<view class="enclosure_box" v-if="activityData.attachmentTemplateList.length > 0">
							<view class="enclosure_item" v-for="(item, index) in activityData.attachmentTemplateList" :key="index">
								<text>{{ index + 1 }}、</text>
								<text>{{ item.title }}</text>
								<text class="remarks_content" v-if="item.required">（必须填写并上传）</text>
								<text>:</text>
								<view class="preview_box" @click="previewFile(item)">点击预览</view>
								<!-- <view class="preview_box" v-else @click="previewFile(item)">不可预览</view> -->
							</view>
							<!-- item.template 这是预览的文件 -->
						</view>
						<view v-else class="no_enclosure_box">暂无信息</view>
					</view>

js 实现逻辑：

		// 预览附件图片
		previewFile(item) {
			console.log(item, '预览文件', this.$url(item.template));
			// 单张图片用这个
			let imgList = [this.$url(item.template)]; // 预览的图片
			// 多张图片采用这个
			// this.timeLimitImg.forEach(item => {
			// 	imgList.push(this.$url(item.template));
			// });
			uni.previewImage({
				current: 1, //预览图片的下标
				urls: imgList, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				loop: true
			});

}

less的css样式：

			.bottom_box {
				.enclosure_box {
					.enclosure_item {
						margin-bottom: 20rpx;
						.remarks_content {
							color: #999999;
						}
						.preview_box {
							display: inline-block;
							width: 140rpx;
							height: 40rpx;
							padding: 0rpx 14rpx;
							background: #e5ecf4;
							color: #014497;
							border-radius: 8rpx;
							margin-left: 12rpx;
						}
					}
				}
				.no_enclosure_box {
					width: 690rpx;
					// height: 48rpx;
					// line-height: 48rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					text-align: center;
				}
			}