layer相册层手机端切换图片解决方案
手机网站需要点击图片预览,相关插件很多,但是都是绑定元素的,还有页面用了VUE,这样就不好用了,刚好layer的相册层很不错,就直接要用了这个,但是问题来了,手机端无法切换 图片,原因在于layer相册层使用的:hover控制切换按钮显示,手机端:hover行不通,所以无法切换,然后打算换插件,找了好多不满意,就想办法让layer支持手机切换,思路如下: layer弹出本质是html,当弹出层完成时会触发success回调,此时就可以查找dome来操作,模拟滑动事件来模拟触发下一页上一页的点击事件达到切换
代码如下:
//定义一个函数绑定事件 function _self() { if(!is_Pc()){ $('#layui-layer-photos .layui-layer-imgbar').css('display','block'); } var image = $("#layui-layer-photos").parent();//顶级元素ID会变,但是二层元素是固定ID,所以可以精确获取二层元素,从而精确获取顶级(非遮罩), var startX, startY,endX, endY;//开始时的坐标xy 结束时的xy //触摸开始触发事件 $(image).on("touchstart", function (e) { e.preventDefault(); startX = e.originalEvent.changedTouches[0].pageX;//触摸开始时的x坐标 startY = e.originalEvent.changedTouches[0].pageY;//触摸开始时的Y坐标 }); //滑动过程触发的事件 $(image).on("touchmove", function (e) { e.preventDefault(); endX = e.originalEvent.changedTouches[0].pageX-startX;//此时滑动中的X坐标 endY = e.originalEvent.changedTouches[0].pageY-startY;//滑动中的Y坐标 }); //滑动结束触发的事件 $(image).on('touchend', function (e) { e.preventDefault(); //对比X值的正负来判断滑动方向,上下滑则判断Y if (endX > 0) { //上一个 $(image).find('.layui-layer-imgprev').trigger('click');//找到弹出DENO下的上一个按钮,模拟触发点击事件 } else if (endY < 0) { //下一个 $(image).find('.layui-layer-imgnext').trigger('click');//找到弹出DENO下的下一个按钮,模拟触发点击事件 } }); } // start 图片遮罩 var layerphotos = document.getElementsByClassName('layer-photos-demo'); for(var i = 1;i <= layerphotos.length;i++){ layer.photos({ photos: ".layer-photos-demo"+i+"" ,anim: 0 , success: function (image) {//弹出层加载完毕,开始绑定事件 _self(); } , tab: function (image) {//切换相片触发后会销毁原来的dome 需要从新绑定 _self(); } }); }