摘要:圖片延遲加載需要將圖片標簽的改寫成,并且增加類名。取消拖動最后一頁或者第一頁時的留白狀態抵抗率。邊緣抵抗力的大小比例。可應用于分頁器,按鈕和滾動條。點擊查看的文檔
使用 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 方法
設為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; } //html11. 想在輪播圖外創建分頁器、上一頁和下一頁的按鈕(因為swiper的container默認overflow:hidden, 只能在輪播圖中的可視區域顯示切換菜單和上一頁下一頁)//js var swiper = new Swiper(".swiper-container", { scrollbar: ".swiper-scrollbar", //滾動條的類名 direction: "vertical", // 豎列排行 slidesPerView: "auto", // 可同時展示多少個 slide mousewheelControl: true, //鼠標滾輪 freeMode: true, // slide 是否貼合側邊 roundLengths : true, //防止文字模糊 });
獨立分頁元素,當啟用(默認)并且分頁元素的傳入值為字符串時,swiper會優先查找子元素匹配這些元素。可應用于分頁器,按鈕和滾動條。
var mySwiper = new Swiper(".swiper-container",{ pagination : ".swiper-pagination", uniqueNavElements :false, })點擊查看swiper的 API 文檔
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92576.html
摘要:觸摸情況下,如果釋放時沒有達到過渡條件而回彈時不會觸發這個函數獲取當前索引回調函數,當你輕觸后執行。設置回調函數,用來處理服務器響應,使用。 在日常工作中,時常會碰到各種各樣的坑,有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上,希望自己能夠跨越重重阻礙,越走越遠。學會時常總結,不斷提升自己。 本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑,一方面加深自...
摘要:觸摸情況下,如果釋放時沒有達到過渡條件而回彈時不會觸發這個函數獲取當前索引回調函數,當你輕觸后執行。設置回調函數,用來處理服務器響應,使用。 在日常工作中,時常會碰到各種各樣的坑,有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上,希望自己能夠跨越重重阻礙,越走越遠。學會時常總結,不斷提升自己。 本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑,一方面加深自...
摘要:觸摸情況下,如果釋放時沒有達到過渡條件而回彈時不會觸發這個函數獲取當前索引回調函數,當你輕觸后執行。設置回調函數,用來處理服務器響應,使用。 在日常工作中,時常會碰到各種各樣的坑,有時真的覺得很多時候開發的經驗都是踩坑踩出來的。在通往大牛的道路上,希望自己能夠跨越重重阻礙,越走越遠。學會時常總結,不斷提升自己。 本文章旨在總結開發過程中碰到的容易忘記或者比較重要的坑,一方面加深自...
閱讀 1141·2021-11-23 10:04
閱讀 2401·2021-11-22 15:29
閱讀 2743·2021-11-19 09:40
閱讀 715·2021-09-22 15:26
閱讀 2117·2019-08-29 16:27
閱讀 2484·2019-08-29 16:10
閱讀 1918·2019-08-29 15:43
閱讀 3275·2019-08-29 12:43