uniapp写一个图片预览效果

Uniapp是一款跨平台的开发框架，可以帮助开发者快速构建多端应用。在Uniapp中，我们可以使用uni-image-preview组件来实现图片预览效果。

首先，我们需要在页面中引入uni-image-preview组件：

<template>
  <view>
    <uni-image-preview :urls="imageUrls"></uni-image-preview>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imageUrls: [
          'https://example.com/image1.jpg',
          'https://example.com/image2.jpg',
          'https://example.com/image3.jpg'
        ]
      }
    }
  }
</script>

在上面的代码中，我们定义了一个imageUrls数组，其中包含了三张图片的URL。然后，在页面中使用uni-image-preview组件，并将imageUrls数组作为urls属性传递给组件。

接下来，我们需要在uni-image-preview组件中添加图片预览功能。我们可以使用v-for指令来遍历imageUrls数组，并为每张图片添加点击事件：

<template>
  <view>
    <uni-image-preview :urls="imageUrls"></uni-image-preview>
    <image v-for="(url, index) in imageUrls" :key="index" :src="url" @click="previewImage(index)"></image>
  </view>
</template>

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

在上面的代码中，我们使用v-for指令遍历imageUrls数组，并为每张图片添加了一个点击事件。当用户点击图片时，我们调用了uni.previewImage方法来预览图片。在previewImage方法中，我们将imageUrls数组作为urls参数传递给previewImage方法，并将当前点击的图片URL作为current参数传递给previewImage方法。

最后，我们可以在页面中预览图片了。当用户点击图片时，会弹出一个图片预览窗口，用户可以在预览窗口中滑动浏览所有的图片。

总结：

使用uni-image-preview组件可以帮助我们快速实现图片预览功能。在实现过程中，我们需要定义一个包含图片URL的数组，并将该数组作为urls属性传递给uni-image-preview组件。同时，我们还需要为每张图片添加点击事件，并在点击事件中调用uni.previewImage方法来预览图片。