橘子味的心
layer相册层手机端切换图片解决方案
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();
        }
    }); 
}


阅读 0

分类

    热门排行