解决使⽤swiper常见的问题
使⽤ swiper 的过程中个⼈总结
1. swiper插件使⽤⽅法, 直接查看⽂档
2.swiper近视初始化时, 其⽗级元素处于隐藏状态(display:none)，会导致swiper初始化失败, 页⾯中的滚动效果有问题解决⽅法1:
var mySwiper = myApp.swiper('.guest-wrapper',{
js实现轮播图最简代码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 初始化(可⽤在多个⼦ swiper 上)
var swiper = new Swiper('.{{ns}}-swiper', {
simulateTouch: false,
mousewheel: true,
nested: true,
on: {
slideChangeTransitionStart: function () {
//此处禁⽌外层 swiper
window.usewheel.disable();
},
slideChangeTransitionEnd: function () {
window.able();
}
}
});
4.swiper⾥⾯的图⽚懒加载与预加载, 可以使⽤⾃带的 lazyload ⽅法
设为true开启图⽚延迟加载默认值，使preloadImages⽆效。或者设置延迟加载选项。
图⽚延迟加载：需要将图⽚img标签的src改写成data-src，并且增加类名swiper-lazy。
背景图延迟加载：载体增加属性data-background，并且增加类名swiper-lazy。
还可以加⼀个预加载，<div class="swiper-lazy-preloader"></div>
或者⽩⾊的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
当你设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。
var mySwiper = new Swiper('.swiper-container', {
lazy: {
loadPrevNext: true,
},
});
5. 取消拖动最后⼀页或者第⼀页时的留⽩状态
抵抗率。边缘抵抗⼒的⼤⼩⽐例。值越⼩抵抗越⼤越难将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.
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
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>⽆限多的内容⽆限多的内容⽆限多的内容⽆限多的内容</p>
</div>
</div>
<!-- Add Scroll Bar -->
<div class="swiper-scrollbar"></div>
</div>
//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,
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。