更新记录

1.0.4(2022-12-07)

修改:判断在APP端不监听document的滚动

1.0.3(2022-12-05)

新增:支持视频预览,视频图片混用 新增:支持预览单张,handlePreviewImg方法直接传入图片或视频地址即可单张预览

1.0.2(2022-12-05)

查看更多

平台兼容性

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

image

一款兼容vue2,vue3的图片预览插件,视频预览,支持图片视频混用,支持单张多张,左右滑动,放大缩小

基础使用方法

    <template>

        <image v-for="(item,idx) in imgList" :src="item" :key="idx" @tap="handleClick(idx)"></image>
        <g-preview-img :imgList="imgList" ref="preview"><g-preview-img>
    </template>

    <script setup>
        import { ref } from 'vue'
        const preview = ref(null)
        const imgList = ['图片路径1','图片路径2']
        const handleClick = (idx)=>{
            // idx为要打开的图片的索引,也可以不传,默认打开第一张
            // handlePreviewImg的参数支持传入单张图片地址或单个视频地址
            preview.value.handlePreviewImg(idx)
        }
    </script>
属性名/事件 类型 默认值 说明
modeClass Array/String ['fade', 'zoom-out'] uni-transition组件过渡效果,可选值见 https://uniapp.dcloud.net.cn/component/uniui/uni-transition.html#mode-class-%E5%86%85%E7%BD%AE%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB%E7%B1%BB%E5%9E%8B%E8%AF%B4%E6%98%8E
indicatorDotsType Boolean false 多张图片的指示器,ture为圆点,false数字,当图片列表只有一张图片时,默认不展示指示器
imgList Array 图片列表
disabledScale Boolean false 是否禁止双指放大缩小
@preview 打开关闭事件 接受一个参数,ture为开启,false为关闭
@changeImg 图片切换的事件 参数为当前的图片索引

插槽,自定义翻页按钮


<g-preview-img :imgList="imgList" ref="preview">
    <template>
        <!--你的翻页按钮-->
        <view @tap.stop="previousImg">上一页</view>
        <view @tap.stop="nextImg">下一页</view>
    </template>
</g-preview-img>

<script>
    const preview = ref(null)
    //上一页的方法
    const previousImg = ()=>{
        preview.value.previousImg()
    }
    //下一页的方法
    const previousImg = ()=>{
        preview.value.nextImg()
    }
</script>

支持uniapp原生swiper的属性

插件内部swiper标签上绑定了$attrs,所以在使用时可以传入一些swiper的属性
注意:不要传disable-touch这个属性,会有意想不到的错误

插件bug会及时修复!!

隐私、权限声明

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

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

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

许可协议

MIT协议

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