更新记录

v1.0.1（2025-08-08） 下载此版本

图片预览

v1.0.0（2025-08-08） 下载此版本

图片预览

平台兼容性

uni-app(4.07)

uni-app x(4.42)

安装教程

1. xxxx
2. xxxx
3. xxxx

使用说明

<template>
  <view>
    <!-- 触发图片预览的按钮 -->
    <button @click="openPreview">预览图片</button>
    <!-- 图片预览组件 -->
    <ywPreview
      :images="imageList"
      :initialIndex="0"
      v-if="isPreviewVisible"
      @close="closePreview"
    ></ywPreview>
  </view>
</template>

<script>
import ywPreview from '@/components/yw-preview/yw-preview.vue';

export default {
 components: {
    ywPreview
 },
  data() {
    return {
      imageList: [
        'https://img1.baidu.com/it/u=3290819308,452036545&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667',
        'https://img2.baidu.com/it/u=784868447,2698648098&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
      ],
      isPreviewVisible: false
    };
  },
  methods: {
    // 打开图片预览的方法
    openPreview() {
      this.isPreviewVisible = true;
    },
    // 关闭图片预览的方法
    closePreview() {
      this.isPreviewVisible = false;
    }
  }
};
</script>

2. 具体前端页面请下载示例项目运行查看