美文网首页
运用iscroll.js碰到问题与解决办法

运用iscroll.js碰到问题与解决办法

作者: 百无禁忌_4c2c | 来源:发表于2018-02-01 15:08 被阅读0次

    一个三人成团的游戏用到iscroll这个插件,碰到了这样的三个问题

    1 如图

    点击每个团的时候都会跳转到每个团的详情页面,滑动的时候又要有滑动效果,这会会导致你每次滑动的时候都会默认为点击事件从而页面无法滑动

    解决办法:touchstart 的时候记录当前手指的Y坐标

    var startPoint= 0;

    var touch= e.originalEvent.changedTouches[0];

    startPoint= touch.pageY;

            touchend的时候记录当前手指的Y坐标

        var touch= e.originalEvent.changedTouches[0];

        if(startPoint===touch.pageY){

       // window.location.href= $(this).attr('data-url');//做你想做的事情

        }else {

            return false;

        }

    这俩步做完以后你会发现虽然点击和滑动没有冲突了但是滑动会变的巨卡无比,iscrool有很多自定义事件其中俩个事件

    myscroll.on('scrollStart',star);//滚动开始的时候执行star函数

    myscroll.on('scrollEnd',end);//滚动结束的时候执行end函数

    这样我可以在每次开始的时候解绑元素的所有事件

        function star() {

                $(".linkurl").unbind();

    }

    每次滚动结束的时候在把元素的事件加上

    这样就解决了点击和滑动冲突的问题

    2 直接上图

    默认中奖名单是隐藏的 点击显示,显示的内容有滚到效果,我做的时候发现我加了滚动实际并没有效果

    解决办法是当需要滚动的内容显示后调用iscrool的myScroll.refresh()方法,重新计算一下。

    $('.list').show();

    myScroll.refresh();

    第三 个问题是 input 滑动的时候光标移位

    我的解决办法是 iscroll有俩种滚动状态 一种是利用css3transform  默认,第二种是 js计算实现直接关闭

    useTransform = 'false',就可以了

    相关文章

      网友评论

          本文标题:运用iscroll.js碰到问题与解决办法

          本文链接:https://www.haomeiwen.com/subject/crudzxtx.html