uniapp H5页面图片预览功能

在uniapp中，可以使用uni.previewImage API来实现图片预览功能。具体步骤如下：

1. 在页面中引入uni.previewImage API：

import uni from '@/uni_modules/uni-ui/lib/uni-api/index.js';

2. 在需要预览图片的地方，绑定点击事件并调用uni.previewImage API：

<template>
  <view>
    <image src="../../static/imgs/1.jpg" @click="previewImage"></image>
    <image src="../../static/imgs/2.jpg" @click="previewImage"></image>
    <image src="../../static/imgs/3.jpg" @click="previewImage"></image>
  </view>
</template>

<script>
import uni from '@/uni_modules/uni-ui/lib/uni-api/index.js';

export default {
  methods: {
    previewImage(event) {
      const current = event.target.src;
      uni.previewImage({
        current: current,
        urls: [
          '../../static/imgs/1.jpg',
          '../../static/imgs/2.jpg',
          '../../static/imgs/3.jpg'
        ]
      });
    }
  }
}
</script>

在上面的代码中，我们在三张图片中绑定了点击事件，并且在点击事件中调用了uni.previewImage API。API需要传入两个参数：current和urls。

- current：表示当前要预览的图片的URL。
- urls：表示所有要预览的图片的URL，以数组形式传入。

需要注意的是，urls数组中的第一个元素必须是current，否则在预览时会出现错误。

以上就是在uniapp中实现图片预览功能的方法。