layer.photos相册组件动态预览图片遇到的问题
编辑时间:2021-04-13 作者:金满斗 浏览量:4166 来源:原创

说句老实话,自从接触了vue后,觉得layui框架是不是国内基于jq操作的最后绝唱呢?

闲话少叙,软件里要看图片大图,自然少不了layer.photos

一般使用也就如文档里这样

//HTML示例
<div id="layer-photos-demo" class="layer-photos-demo">
  <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
  <img layer-pid="图片id,可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
</div>
 
<script>
//调用示例
layer.photos({
  photos: '#layer-photos-demo'
  ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
}); 
</script>

我以前动态操作就这样

先拼接图片,这里不表,用html表示,然后


$("#layer-photos-demo").html(html);
layer.photos({
     photos: '#layer-photos-demo',shade: .6closeBtn: true
}); 
后来发现一个问题,在动态切换图片后再次点击,总喜欢第一次显示以前的图片,再次点击才来。


也行是layer.photos里面带了缓存吧,具体什么原因不管了。

解决的方法,包裹图片上一层加个div,class写成myimagetab吧。

然后动态加载后再加监听,这样。


$("#layer-photos-demo").html(html);
            layer.photos({
                photos: '.myimagetab',shade: .6closeBtn: true
            }); 




来说两句吧