博客站

在 UniApp 中，图片预览是常见的需求之一，例如在相册、商品详情等场景中查看大图。UniApp 提供了 uni.previewImage API 来实现图片预览功能。以下是 UniApp 处理图片预览的详细步骤：

一、基本图片预览

1. 使用 uni.previewImage

• uni.previewImage 是 UniApp 提供的图片预览 API，支持单张和多张图片预览。
• 示例：

  uni.previewImage({
    urls: ['https://example.com/image1.jpg'], // 图片地址列表
    current: 0 // 当前显示的图片索引
  });
  

2. 预览多张图片

• 通过 urls 参数传入多张图片地址，用户可以左右滑动切换图片。
• 示例：

  uni.previewImage({
    urls: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ],
    current: 1 // 默认显示第二张图片
  });
  

二、处理图片预览事件

1. 监听图片切换

• 通过 success 回调函数监听图片切换事件。
• 示例：

  uni.previewImage({
    urls: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ],
    current: 1,
    success: (res) => {
      console.log('当前显示的图片索引：', res.current);
    }
  });
  

2. 监听图片预览关闭

• 通过 fail 回调函数监听图片预览关闭事件。
• 示例：

  uni.previewImage({
    urls: ['https://example.com/image1.jpg'],
    fail: (err) => {
      console.log('图片预览关闭：', err);
    }
  });
  

三、自定义图片预览

如果需要自定义图片预览界面，可以使用 swiper 组件和 image 组件实现。

1. 使用 swiper 组件

• 示例：

  <template>
    <swiper :current="currentIndex" @change="onSwiperChange">
      <swiper-item v-for="(url, index) in imageUrls" :key="index">
        <image :src="url" mode="aspectFit" style="width: 100%; height: 100%;"></image>
      </swiper-item>
    </swiper>
  </template>
  
  <script>
  export default {
    data() {
      return {
        imageUrls: [
          'https://example.com/image1.jpg',
          'https://example.com/image2.jpg',
          'https://example.com/image3.jpg'
        ],
        currentIndex: 1
      };
    },
    methods: {
      onSwiperChange(e) {
        this.currentIndex = e.detail.current;
      }
    }
  };
  </script>
  

2. 添加关闭按钮

• 在自定义预览界面中添加关闭按钮。
• 示例：

  <template>
    <view class="preview-container">
      <swiper :current="currentIndex" @change="onSwiperChange">
        <swiper-item v-for="(url, index) in imageUrls" :key="index">
          <image :src="url" mode="aspectFit" style="width: 100%; height: 100%;"></image>
        </swiper-item>
      </swiper>
      <button class="close-button" @click="closePreview">关闭</button>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        imageUrls: [
          'https://example.com/image1.jpg',
          'https://example.com/image2.jpg',
          'https://example.com/image3.jpg'
        ],
        currentIndex: 1
      };
    },
    methods: {
      onSwiperChange(e) {
        this.currentIndex = e.detail.current;
      },
      closePreview() {
        uni.navigateBack();
      }
    }
  };
  </script>
  
  <style>
  .preview-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
  }
  .close-button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
  </style>
  

四、总结

UniApp 处理图片预览的步骤如下：

1. 使用 uni.previewImage：通过 uni.previewImage API 实现图片预览。
2. 处理图片预览事件：通过 success 和 fail 回调函数监听图片切换和关闭事件。
3. 自定义图片预览：使用 swiper 和 image 组件实现自定义图片预览界面。

以下是一个完整的图片预览示例：

uni.previewImage({
  urls: [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
  ],
  current: 1,
  success: (res) => {
    console.log('当前显示的图片索引：', res.current);
  },
  fail: (err) => {
    console.log('图片预览关闭：', err);
  }
});

通过合理使用这些方法，可以轻松实现 UniApp 中的图片预览功能，满足应用的需求。