uni-app 小程序：显示图片并且点击图片展示大图

在uni-app中显示图片并且点击图片显示大图，可以使用<image>组件来显示图片，并且使用@click事件监听图片的点击。以下是一个简单的示例代码：

<template>
  <view>
    <!-- 循环显示图片列表 -->
    <view class="image-list">
      <image
        v-for="(img, index) in imageList"
        :key="index"
        :src="img"
        class="image-item"
        @click="previewImage(index)" />
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      // 图片列表
      imageList: [
        'http://example.com/image1.jpg',
        'http://example.com/image2.jpg',
        'http://example.com/image3.jpg'
      ]
    };
  },
  methods: {
    // 预览图片
    previewImage(index) {
      // 使用uni.previewImage API 预览图片
      uni.previewImage({
        current: index, // 当前显示图片索引
        urls: this.imageList // 需要预览的图片链接列表
      });
    }
  }
};
</script>
 
<style>
.image-list {
  display: flex;
  flex-wrap: wrap;
}
.image-item {
  width: 30%; /* 根据需要调整图片宽度 */
  margin: 5px; /* 图片间距 */
}
</style>

在这个示例中，我们定义了一个名为imageList的数组来存储图片链接。在模板中，我们使用v-for指令循环显示每个图片。每个<image>组件都有一个@click事件监听器，当点击图片时，调用previewImage方法。在previewImage方法中，我们使用了uni.previewImage API 来预览当前图片以及列表中的其他图片。