更新记录

1.0.0(2021-07-07) 下载此版本

发布1.0.0


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
  • 注意此插件仅支持H5!!!!!!!!
  • 基于photoswipe封装,组件已使用getImageInfo获取图片宽高,也可以后台返回宽高来节省性能。
  • 图片必须要有宽高。
  • npm i photoswipe
  • 配置项请参考photoswipe文档 photoswipe官网或自行百度中文文档
  • 解决自带previewImage放大缩小图片变模糊的问题
  • 只渲染3个div与图片数量无关,其他插件大多都是N张图片就加载了N个dom,此组件最多加载3个所以性能高于大部分组件。
    npm i photoswipe
import photoswipe from '@/components/ben-photoswipe/ben-photoswipe.vue'
<photoswipe ref="prImgs" :imgs.sync="ImageList"></photoswipe>
export default {
        components: {
            photoswipe
        },
        data() {
            return {
                //为了更直观,原图和缩略图用了两张不同的图片
                ImageList:[{
                    imgUrl:"https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                },
                {
                    imgUrl:"https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF",
                    acronymUrl:"https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF",
                    picture:false,
                }]
            }
        },
        onLoad() {

        },
        onShow() {
            //可以去掉,防止从其他页面调回来图片不显示,这里强制初始化一下
            this.$nextTick(()=>{
                if(this.$refs.prImgs){
                    this.$refs.prImgs.resImg()
                }

            })

        },
        methods: {
            prviewImage(k){
                 this.$refs.prImgs.initImage(k)
            }
        }
    }
}

隐私、权限声明

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

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

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

许可协议

MIT协议

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