layer相册层手机端切换图片解决方案

分享 未结 0 161
竹林风
竹林风 2019-8-19
悬赏:20飞吻
手机网站需要点击图片预览,相关插件很多,但是都是绑定元素的,还有页面用了VUE,这样就不好用了,刚好layer的相册层很不错,就直接要用了这个,但是问题来了,手机端无法切换 图片,原因在于layer相册层使用的:hover控制切换按钮显示,手机端:hover行不通,所以无法切换,然后打算换插件,找了好多不满意,就想办法让layer支持手机切换,思路如下:
layer弹出本质是html,当弹出层完成时会触发success回调,此时就可以查找dome来操作,模拟滑动事件来模拟触发下一页上一页的点击事件达到切换效果

 代码如下:
function showImg  (src) {
var _self=this;
var data = [];//图片列表
if (typeof src == 'string') {
data.push({src: src});
} else if (src instanceof Array) {
for (var i in src) {
data.push({src: src[i]});
}
}

//定义一个函数绑定事件
_self.bindTouchEnevt=function() {
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下的下一个按钮,模拟触发点击事件
}
});
}


layer.photos({
photos: {
"title": false, //相册标题
"start": 0, //初始显示的图片序号,默认0
"data": data
} //格式见API文档手册页
, anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机
, success: function (image) {//弹出层加载完毕,开始绑定事件
_self.bindTouchEnevt();
},
tab: function (image) {//切换相片触发后会销毁原来的dome 需要从新绑定
_self.bindTouchEnevt();
}
});
}
回帖
  • 消灭零回复