解決使用 swiper 常見的問題
阿新 • • 發佈:2019-01-03
使用 swiper 的過程中個人總結
1. swiper外掛使用方法, 直接檢視文件
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 方法
設為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
}
}
})
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,
})