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

如果您搜到这篇文章的话,那估计您遇到跟我一样的问题了.
众所周知,每一个插件都有很多坑,比如说市面上比较火爆的 图片浏览插件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();
         },
     });
 })
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值