uniapp实现当行多图片点击预览

本文主要讲述从表格数据当行中实现图片点击预览功能

1、首先要先显示当前行数据，tabData是私有的数据，里面包含了图片数据imgs_arr,imgs_arr的数据格式如下

 我在这遍历了图片数组，其中设置mage-table让图片可以在一排都显示

        .image-table:{

                display:flex

                }

注意！！我在图片点击事件传的是tabledata的item和图片的img！！别传错了，不然就不能实现了

<uni-tr  v-for="(item, index) in tableData" :key="index">
						<uni-td align="center"  class="textbianhao">{{ item.device_info.device_sn }}</uni-td>
						<uni-td align="center">
							<view class="item01">
								<text class="item-box"
										:class="item.is_ele_auth === '0'?'cole6a23c':'col67c23a'">{{item.is_ele_auth === '0' ? '未确权' : '已确权'}}</text>
							</view></uni-td>
							<uni-td align="center">
								<view class="image-table">
									<view  v-for="(img,i) in item.imgs_arr" :key="i">
										<image v-if="item.imgs_arr[0]!=''" style="width: 100rpx; height: 100rpx;margin-left: 5rpx;" :mode="item.mode"
											 @click="previewSqs(item,img)"
											:src="img">
										</image>
										<text v-else>暂无图片</text>
									</view>
								</view>
							</uni-td>
					</uni-tr>

2、图片实现调用了uni的uni.previewImage的这个方法实现

// 图片预览
			previewSqs(previewImg,index) {
				console.log('index',previewImg, index)
				console.log('预览')
				let _this = this;
				let imgsArray = [];
//在这遍历的还是图片数据，也就是tabledata下的imgs_arr属性
					for (let i = 0; i < previewImg.imgs_arr.length; i++) {
						imgsArray.push(previewImg.imgs_arr[i])
					}
				console.log(imgsArray,'------------');

				uni.previewImage({
					current: index,//当前所点击预览的图片地址
					urls: imgsArray,//这就是当前行图片数据，注意一定要是数组格式
					indicator: 'number',
					loop: true
				});
			},

 到此就结束啦~希望对你有所帮助