解决使用 swiper 常见的问题

王伟廷发布于2019-08-22 13:53 / 3034人阅读

摘要：图片延迟加载需要将图片标签的改写成，并且增加类名。取消拖动最后一页或者第一页时的留白状态抵抗率。边缘抵抗力的大小比例。可应用于分页器，按钮和滚动条。点击查看的文档

使用 swiper 的过程中个人总结

1. swiper插件使用方法, 直接查看文档

swiper基础演示

swiper API文档

2.swiper近视初始化时, 其父级元素处于隐藏状态(display:none),会导致swiper初始化失败, 页面中的滚动效果有问题

解决方法1: 
 var mySwiper = myApp.swiper(".guest-wrapper",{
     observer: true,//修改swiper自己或子元素时，自动初始化swiper
     observeParents: true//修改swiper的父元素时，自动初始化swiper
 });
 
解决方法2: 
直接写死宽高
  var mySwiper = myApp.swiper(".guest-wrapper",{
     width:500,
     height:500
 });

3.滚动swiper插件中嵌套滚动插件, 要求子插件滚动全部完成后成能进行父元素的滚动 ==(swiper4 中滚动嵌套)==

//外层的父级 swiper 初始化
window.window_swiper = new Swiper(".window_swiper_container", {
    speed: 800,
    mousewheel: true,
    simulateTouch: false,
    nested: true,
    on: {

        onSlideChangeStart: function(swiper) { //滑动父级需要激活滚轮事件
            swiper.enableMousewheelControl();
        }

    }
});


// 内层子 swiper 初始化(可用在多个子 swiper 上)
    var swiper = new Swiper(".{{ns}}-swiper", {
      simulateTouch: false,
      mousewheel: true,
      nested: true,
      on: {
        slideChangeTransitionStart: function () {
        //此处禁止 外层 swiper
          window.window_swiper.mousewheel.disable();
        },
        slideChangeTransitionEnd: function () {
          window.window_swiper.mousewheel.enable();
        }
      }
    });

4.swiper里面的图片懒加载与预加载, 可以使用自带的 lazyload 方法

swiper4 懒加载文档

设为true开启图片延迟加载默认值，使preloadImages无效。或者设置延迟加载选项。

图片延迟加载：需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
背景图延迟加载：载体增加属性data-background，并且增加类名swiper-lazy。

还可以加一个预加载，
或者白色的

当你设置了slidesPerView:"auto" 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。


var mySwiper = new Swiper(".swiper-container", {
  lazy: {
    loadPrevNext: true,
  },
});

5. 取消拖动最后一页或者第一页时的留白状态

resistanceRatio

抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。

6. 移动端顶部长菜单超出隐藏

长菜单超出隐藏滚动切换

7.free模式/抵抗反弹 freeMode

默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。

8.最后一页的高度较小时的切换(最后一个页脚不是全高的页面展示)

var mySwiper = new Swiper(".swiper-container",{
slidesPerView : 2,//"auto"
//slidesPerView : 3.7,
//如果设置为auto（例如制作全屏展示时的页脚部分），最后一个slide在键盘或鼠标滚动时可能会直接跳到倒数第三个slide，
//此时可以手动设置activeIndex解决，如下
  onTransitionEnd: function(swiper){
      if(swiper.progress==1){
          swiper.activeIndex=swiper.slides.length-1
      }
          }
})

9.Effects (切换效果)

slide的切换效果，默认为"slide"（位移切换），可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。

10.内容滚动(在ios下也能滚动的很流畅)

//css
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 700px;
        height: 100%;
    }
    .swiper-slide {
        font-size: 18px;
        height: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 30px;
        font-size:13px;font-family:microsoft yahei; line-height:1.8;
    }
    p{
    
        margin-bottom:1em;
    }

//html
    
        
            
               无限多的内容无限多的内容无限多的内容无限多的内容
            
        
        
        
    


//js
    var swiper = new Swiper(".swiper-container", {
        scrollbar: ".swiper-scrollbar",     //滚动条的类名
        direction: "vertical",      // 竖列排行
        slidesPerView: "auto",      // 可同时展示多少个 slide 
        mousewheelControl: true,    //鼠标滚轮
        freeMode: true, // slide 是否贴合侧边
        roundLengths : true, //防止文字模糊
    });

11. 想在轮播图外创建分页器、上一页和下一页的按钮(因为swiper的container默认overflow:hidden, 只能在轮播图中的可视区域显示切换菜单和上一页下一页)

独立分页元素，当启用（默认）并且分页元素的传入值为字符串时，swiper会优先查找子元素匹配这些元素。可应用于分页器，按钮和滚动条。

var mySwiper = new Swiper(".swiper-container",{
    pagination : ".swiper-pagination",
    uniqueNavElements :false,
})

点击查看swiper的 API 文档

超融合服务器专线服务 java的常见问题关于云服务器的常见问题 ecs常见的问题都有哪些阿里云服务器开传奇的常见问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92576.html

解决使用 swiper 常见的问题

摘要：图片延迟加载需要将图片标签的改写成，并且增加类名。取消拖动最后一页或者第一页时的留白状态抵抗率。边缘抵抗力的大小比例。可应用于分页器，按钮和滚动条。点击查看的文档使用 swiper 的过程中个人总结 1. swiper插件使用方法, 直接查看文档 swiper基础演示 swiper API文档 2.swiper近视初始化时, 其父级元素处于隐藏状态(display:none),会...

Imfan 2019-08-05 12:48 评论0 收藏0
总结开发过程踩到的坑（一）

摘要：触摸情况下，如果释放时没有达到过渡条件而回弹时不会触发这个函数获取当前索引回调函数，当你轻触后执行。设置回调函数，用来处理服务器响应，使用。在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自...

Panda 2019-08-05 12:51 评论0 收藏0
总结开发过程踩到的坑（一）

摘要：触摸情况下，如果释放时没有达到过渡条件而回弹时不会触发这个函数获取当前索引回调函数，当你轻触后执行。设置回调函数，用来处理服务器响应，使用。在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自...

instein 2019-08-01 18:25 评论0 收藏0
总结开发过程踩到的坑（一）

摘要：触摸情况下，如果释放时没有达到过渡条件而回弹时不会触发这个函数获取当前索引回调函数，当你轻触后执行。设置回调函数，用来处理服务器响应，使用。在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自...

callmewhy 2019-08-22 13:58 评论0 收藏0
总结开发过程踩到的坑（一）

摘要：触摸情况下，如果释放时没有达到过渡条件而回弹时不会触发这个函数获取当前索引回调函数，当你轻触后执行。设置回调函数，用来处理服务器响应，使用。在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自...

zeyu 2019-08-29 14:16 评论0 收藏0