更新记录

1.0(2024-08-12) 下载此版本

1.0


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.13 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

'android.permission.RECORD_AUDIO'

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问