h5使用vue-photo-preview 做全屏预览

h5页面使用全屏预览

最近需要在微信小程序中跳转到h5页面
在h5页面中需要进行图片预览展示
由于没有使用第三方的组件库。
只能手写,但是时间很紧张。
所以只能够寻找第三方的插件

vue-photo-preview的使用

<!-- 引入这个插件 -->
<script src="vue-photo-preview.js"></script>
<!-- 引入这个插件的css -->

<div class="img-bolick showlistimg">
    <!-- 非常重要  preview="1" 的值相同表示是一组可以轮播-->
    <div class="widthimg-box">
        <img class="imgwh" preview="1" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
    </div>
    <div class="widthimg-box">
        <img class="imgwh" preview="1" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
    </div>
    <div class="widthimg-box">
        <img class="imgwh" preview="1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
    </div>	
</div>
</div>

var options = {
    fullscreenEl: true, //关闭全屏按钮
}
Vue.use(vuePhotoPreview, options)
var vm = new Vue({
    el: '#app',
    data: function() {
        return { 
            listimg:[]
        }
    },
    mounted() {
        //异步插入的图片.我们使用点击事件来模拟异步插入图片
        httpsBackData(){
            setTimeout(() => {
                //listimg 是视图上显示的数据源
                this.listimg=[
                'https://img01.yzcdn.cn/vant/cat.jpeg',
                'https://img.yzcdn.cn/vant/apple-1.jpg',
                'https://img.yzcdn.cn/vant/apple-2.jpg']
                //进行预览这样就ok了
                vm.$previewRefresh()
            }, 1000);
        },

        
        this.$preview.on('imageLoadComplete', (e, item) => {
            console.log("xxx", e, item )
            // console.log(this.$preview.self)
        })
    },
}

{{uploading-image-881834.png(uploading...)}}

posted @   何人陪我共长生  阅读(711)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示