關於swiper移動端的坑
阿新 • • 發佈:2018-12-26
這裡講的是swiper相容移動端的問題
為了提高移動端的載入速度,開發人員手動拿出需要的siwper的樣式和js是ok的,
但是這裡需要需要注意幾點
- 移動端上的卡頓問題
- 官方建議程式碼
移動端上的卡頓問題
如果只引用了swiper的js而沒有引入swiper.css和swiper.animate.js,移動端就會出現卡頓問題
<link rel="stylesheet" href="../../styles/library/swiper.min.css"/>
<script src="../../scripts/common/swiper-3.3.1.min.js" ></script>
<script src="../../scripts/common/swiper.animate.min.js"></script>
官方建議程式碼
下面的程式碼是解決在安卓app出現的問題:切換不流暢
// 輪播圖--左右滑動和切換
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:false,
mode: 'horizontal',
freeMode:false ,
touchRatio:0.5,
longSwipesRatio:0.1,
threshold:50,
followFinger:false,
observer: true,//修改swiper自己或子元素時,自動初始化swiper
observeParents: true,//修改swiper的父元素時,自動初始化swiper
onSlideChangeEnd:function(swiper){ // 當滑動結束後---月份日期切換同步左右左右切換
changeMonth();
}
});
靈感來自於@京都玩家