解决使用 swiper 常见的问题 |
您所在的位置：网站首页 › flip3D效果切换 › 解决使用 swiper 常见的问题 |
解决使用 swiper 常见的问题
|
使用 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 文档 |
【本文地址】
今日新闻 |
推荐新闻 |