uniapp多张图片预览和放大缩小

你可以使用uni-app自带的组件`uni-image-preview`来实现多张图片的预览，但是该组件不支持放大缩小功能。如果需要实现放大缩小功能，可以使用第三方组件`uni-simple-image-preview`。

使用`uni-image-preview`组件，你需要在`<template>`中引入该组件并传入图片列表，示例代码如下：

<template>
  <view>
    <image v-for="(item, index) in imgList" :src="item" :key="index" @click="preview(index)"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgList: ['https://example.com/image1.png', 'https://example.com/image2.png', 'https://example.com/image3.png']
    };
  },
  methods: {
    preview(index) {
      uni.previewImage({
        urls: this.imgList,
        current: this.imgList[index]
      });
    }
  }
};
</script>

使用`uni-simple-image-preview`组件，你需要先安装该组件并引入，然后在`<template>`中使用`<uni-simple-image-preview>`标签并传入图片列表，示例代码如下：

<template>
  <view>
    <uni-simple-image-preview :list="imgList"></uni-simple-image-preview>
    <image v-for="(item, index) in imgList" :src="item" :key="index"></image>
  </view>
</template>

<script>
import UniSimpleImagePreview from '@/components/uni-simple-image-preview/uni-simple-image-preview.vue';

export default {
  components: {
    UniSimpleImagePreview
  },
  data() {
    return {
      imgList: ['https://example.com/image1.png', 'https://example.com/image2.png', 'https://example.com/image3.png']
    };
  }
};
</script>

注意：`uni-simple-image-preview`组件需要在`<template>`外部使用，且需要将图片列表作为该组件的属性传入，同时需要在`<script>`中引入该组件并注册为组件。