更新记录

1.0.1（2025-07-22） 下载此版本

显示时初始化信息，防止缓存问题

1.0.0（2025-07-22） 下载此版本

初始版本发布

平台兼容性

uni-app(4.06)

uni-app x(4.06)

un-preview-image

一个图片预览组件，用于代替官方图片预览，自定义内容

注意

1. 该组件使用swiper+movable-area+scroll-view组件，性能较官方uni.previewImage要低
2. 由于scroll-view特性，放大与未放大情况使用两个image，会造成两次图片请求
3. 目前测试仅测试了scaleMin为1的请求，小于1的情况可能有问题
4. 当前组件为了性能原因，暂时仅缩放度小于1时可切换swiper，否则swiper与movable-area冲突可能会造成体验问题

使用示例

<template>
  <view class="content">
    <template v-for="(img, index) in urls">
      <view class="img-wrapper">
        <image class="img" :src="img" :key="index" @click="onPreImg(img)" mode="aspectFill"></image>
        <view class="img-info">
          <text class="img-text">图片 {{index + 1}}</text>
        </view>
      </view>
    </template>
    <button @click="onPreImg">预览图片</button>
    <un-preview-image ref="unPreImg" @item-click="handlePreItemClick" @menu="handlePreMenu"></un-preview-image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      allDownload: true,
      urls: [
        'http://localhost:8080/static/images/98e384903366cb12044ccab154bab84.jpg',
        'http://localhost:8080/static/images/6twme2qohvwcc1dnndjsycoap.jpg',
        'http://localhost:8080/static/images/5a3cb2c9c2779.jpg',
      ]
    }
  },
  onLoad() {

  },
  methods: {
    onPreImg(url) {
      this.$refs.unPreImg.show(this.urls, url)
    },
    handlePreItemClick() {
      this.$refs.unPreImg.close()
    },
    handlePreMenu(data) {
      uni.showActionSheet({
        itemList: ['保存图片'],
        success: (res) => {
          this.$refs.unPreImg.save(data).then(res => {
            uni.showToast({
              title: '保存成功',
              icon: 'none',
            })
          }).catch(() => {
            uni.showToast({
              title: '保存失败',
              icon: 'none',
            })
          })
        }
      })
    }
  }
}
</script>

组件暂不很完善且文档暂时不全，待优化与补充。。。