be-fe / iSlider

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App
http://be-fe.github.io/iSlider/
MIT License
1.66k stars 448 forks source link

Bug: 页面无法正常滚动 #375

Open qpxtWhite opened 8 years ago

qpxtWhite commented 8 years ago

touchmove的时候,阻止了默认事件 当手指按在元素上时,无法正常滚动页面

zhoukekestar commented 8 years ago

设置fixPage属性为false貌似可以

var slider = new iSlider(ele, list, {
        isAutoplay: 1,
        isLooping: 1,
        isOverspread: 1,
        animateTime: 800,
        plugins: [ ['dot', { locate: 'relative' }] ],
        fixPage: false
        //animateType: 'flow'
});

默认行为的取消主要在这行代码: https://github.com/be-fe/iSlider/blob/master/src/js/iSlider.js#L1155 这个属性的解释 http://be-fe.github.io/iSlider/demo/#fixpage 在我们的项目中是可以了 https://m.toomao.com/square a

qpxtWhite commented 8 years ago

我试了下,把fixPage设为false的确可以了;

还有点小瑕疵: 焦点图高度比较高,上下拖动页面时有左右位移,会导致焦点图进行切换 我暂时的做法是,在源码touchmove时,做了判断

            if(judgeflag === 0 && !self.isVertical){    //判断
                var judgeOffsetX = evt.targetTouches[0].clientX - judgeStartX;
                var judgeOffsetY = evt.targetTouches[0].clientY - judgeStartY;
                var ratio = Math.abs(judgeOffsetX) - Math.abs(judgeOffsetY);
                if(ratio > 10){
                    judgeflag = 1;  //左右切换焦点图
                } else if(ratio < -10){
                    judgeflag = -1; //上下拖动页面
                } else {
                    judgeflag = 0;
                }
                return;
            }
            if(judgeflag === -1){   //滚动页面,直接返回,不做slide处理
                return;
            }

不知道这样子有没有什么问题

shinate commented 8 years ago

这里没有特别进行处置,其实这个功能考虑过,但是会出现要求纵向切换并且纵向滚动的场景,╮(╯▽╰)╭ 无解的,所以留给fixPage===false时,自行添加判断吧

Sssnone commented 7 years ago

当使用animateType: 'flow'的时候,没法定义一个可以scroll的content啊。不然根本无法滚动,若设置fixPage==false的话,flow的动画就没了啊,求助

shinate commented 7 years ago

上面有表示过,touch的触发动作可以自行解决的,框架能做的只有“不阻止默认事件”而已。况且,根据一般的经验,滑动和内容scroll的方向肯定是不同的,很好判断,如果相同的话... ╮(╯▽╰)╭