当前位置: 首页 > 工具软件 > media-viewer > 使用案例 >

viewer动态加载图片第一次点击预览图片失败的问题

岳茂
2023-12-01

如果您搜到这篇文章的话,那估计您遇到跟我一样的问题了.
众所周知,每一个插件都有很多坑,比如说市面上比较火爆的 图片浏览插件viewer,有js版本和jqery版本的,尽管这两个版本不一样,但是大同小异.
话不多说直接上代码

HTML部分

 <div style="min-height:180px;">
                    <ul class="barcode_img" id="style_img">
                        <li v-for="m in styleImgList">
                            <img v-bind:src="'/Resource/Product/'+m.url" style="width:80px;height:80px;" />
                        </li>
                    </ul>
                </div>

js部分
敲黑板!!!划重点!!!

//这一段是vue里面的,在dom都渲染完时的成功回调,一定要放在这里执行,也就是js里面的window.onload 函数;
this.$nextTick(function () {
     var viewerStyle = new Viewer(document.getElementById('style_img'), {
         // 相关配置项,详情见下面
         show: function () {        // 动态加载图片后,更新实例
         	//viewerStyle.update();//这一段只能更新图片展示,并不能解决第一次动态加载无法点击查看大图的问题,下面一个才是解决方案
             viewerStyle.view(0).update();
         },
     });
 })
 类似资料: