更新记录

1.0（2024-08-12） 下载此版本

1.0

平台兼容性

uni-app

uni-app x

Easy-preview 图片预览

Easy-preview 图片预览 （支持下载到相册，横屏自动播放，缩放 ） 。

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

注意事项:pages.json中 "globalStyle": { "pageOrientation": "portrait"} 添加 "pageOrientation": "portrait"用于横屏自动播放，不随屏幕方向自动旋转。

基本用法

• 页面结构

  <template>
  <view class="content">
  <view v-for="(item, index) in imgList" :key="index" @longpress="previewImg(index,imgList)" class="image-box">
    <image :src="item.src" mode="aspectFill" class="image" />
  </view>
  <view v-if="Previewimg==true">
    <img-preview :images="imageUrls" :Previewimg="Previewimg" :current-index="currentIndex"
      @quitPreview="stopPreview()"></img-preview>
  </view>
  
  </view>
  </template>

• JavaScript结构

  <script>
  import {imglist} from '@/static/imglist';
  export default {
  data() {
    return {
      imgList: [],
      Previewimg: false,
      imageUrls: '',
      currentIndex: '',
    }
  },
  onLoad() {
    this.imgList = imglist;
  },
  methods: {
    previewImg(current, imgList) {
      this.Previewimg = true;
      const urls = imgList.map(item => item.src);
      this.imageUrls = urls;
      this.currentIndex = current;
    },
    stopPreview() {
      this.Previewimg = false;
    },
  }
  }
  </script>