zoukankan      html  css  js  c++  java
  • H5使用Swiper过程中遇到的滑动冲突

    一、问题

    (1)PC端可以鼠标可以拖动中间的轮子让页面上下滑动,点击左键按着也是拖不动

    (2)手机端浏览H5手指不能滑动页面,导致很多页面下面的文字看不到

    二、解决问题

    1.下面分先说css的问题,主要排查overflow:hidden;

    检查也有一定的顺序,检查超出高度的标签是否用了overflow:hidden;最好先检查html或body是不是加了height:100%;overflow:hidden;然后再看包裹在最外边的元素是否加了overflow:hidden;

    2.再说下js方面的问题,主要是有在touchstart、touchmove或touchend等事件中的阻止默认事件的原因 

    例如:$("#myCarousel").on("touchstart", function (e) { 

                         e.preventDefault();    

                         startX = e.originalEvent.changedTouches[0].pageX,
                        startY = e.originalEvent.changedTouches[0].pageY;

              });

    这种代码其中e.preventDefault();会阻止掉默认的滚动行为。

    问题核心:

    排查CSS,排查JS,引用的第三方的JS库问题,例如我的swiper.min.js中就有很多 e.preventDefault();    的东西

    比如css中我的也有overflow:hidden;的东西

    解决问题:目前的解决方案是注释掉了项目中swiper的部分样式引用,如下面的代码,在最外面的容器中不适用swiper,存放图片的容器可以使用swiper的滑动功能

    另外附上swiper的初始化代码

        var mySwiper = new Swiper('.swiper-container',{
            passiveListeners : false,
            direction : 'vertical',
            autoplayDisableOnInteraction : false,
            loop:false
        });
        var mySwiper2 = new Swiper('.swiper-container2',{
            pagination : '.swiper-pagination',
            loop : true,
            onSlideChangeEnd: function(swiper){
            }
        });
  • 相关阅读:
    c++和java(c#)之间的pk
    C语言中.h和.c文件解析
    怎样花两年时间去面试一个人
    进程调度算法模拟
    1079 中国剩余定理
    Educational Codeforces Round 50 (ABCD)
    解决Android Studio默认AppTheme 没有lable标签,不显示等问题
    Codeforces Round #508(ABCD)
    牛客OI赛制测试赛2
    deepin关机卡在图标界面 mysql Community...10min
  • 原文地址:https://www.cnblogs.com/wxjnew/p/9178729.html
Copyright © 2011-2022 走看看