h5使用vuephotopreview 做全屏预览

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...)}}