zoukankan      html  css  js  c++  java
  • swiper 插件里面嵌套可滚动内容

    1,slide是固定一屏的

    在移动端使用swiper的整屏滚动,如果slide里面有滚动内容的话,滚动的时候会整个页面一起滚动,如果想里面的滚动区域单独滚动的话,可以在初始化swiper的时候添加上 noSwipingClass 这个选项,值就是你想滚动的那个区域的class。

    new Swiper('#Jswiper', {
        direction: 'vertical',
        noSwipingClass : 'scroll-wrap',
        }

    参考链接:http://caibaojian.com/swiper-iscroll.html

    2,slide高度不固定 ,必须在swiper-container为display:block的状态下初始化,即使设置了observer:true,observeParents:true,也是不行的

    //swiper-slide里嵌套滚动容器  p.s.:需要滚动的slide的样式要添加 overflow-y:scroll;
                    var startScroll, touchStart, touchCurrent; 
                    
                    mySwiper.slides.on('touchstart', function (e) {  
                        if(mySwiper.activeIndex == 0){  //actinveIndex 就是需要滚动的slide对应的index
                            startScroll = this.scrollTop;
                            touchStart = e.targetTouches[0].pageY;
                        }
                    }, true);
                    mySwiper.slides.on('touchmove', function (e) {  
                        if(mySwiper.activeIndex == 0){   //actinveIndex 就是需要滚动的slide对应的index
    touchCurrent = e.targetTouches[0].pageY; var touchesDiff = touchCurrent - touchStart; var slide = this; var onlyScrolling = ( slide.scrollHeight > slide.offsetHeight ) && //allow only when slide is scrollable  ( ( touchesDiff < 0 && startScroll === 0 ) || //start from top edge to scroll bottom ( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) || //start from bottom edge to scroll top ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) ) //start from the middle  ); if (onlyScrolling) { e.stopPropagation(); } } }, true);
  • 相关阅读:
    a.default.ERROR.httpAjax is not a function
    Java heap space
    jmeter
    sql注入
    数据库查前三名
    maven
    国际化变现应用分析
    百度应用部署秘籍
    如何建立起一套有效的APP监控体系
    第三方舆情收集与质量闭环建设
  • 原文地址:https://www.cnblogs.com/haqiao/p/11589755.html
Copyright © 2011-2022 走看看