h5页面使用全屏预览
最近需要在微信小程序中跳转到h5页面
在h5页面中需要进行图片预览展示
由于没有使用第三方的组件库。
只能手写，但是时间很紧张。
所以只能够寻找第三方的插件
vue-photo-preview的使用
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)
})
},
}
