Swipe 移動端滑動插件使用詳解

ZHAO_ 發布于2019-08-21 14:35 / 2463人閱讀

摘要：前言最近需要開發一個新的微信活動平臺，手機端主頁需要用到一個幻燈片。簡介是一個輕量級的移動滑動組件，這點從文件大小不難看出。它支持的觸摸移動，阻力以及防滑。單純從移動端來使用，應該滿足基本的需求了。

前言

最近需要開發一個新的“微信活動平臺”，手機端主頁需要用到一個幻燈片。因為好一段時間沒有全部手寫移動端頁面了，遂又重新找了一個下有沒有什么好的幻燈片插件，畢竟重復造輪子沒有必要啊。

綜合比較后發現，Swipe 這款插件還是比較不錯的，所以這里特地寫一篇文章以像大家推薦，并且作為記錄，方便下次查看。

簡介

Swipe 是一個輕量級的移動滑動組件，這點從文件大小不難看出。它支持 1:1 的觸摸移動，阻力以及防滑。單純從移動端來使用，應該滿足基本的需求了。

說明

從github下載后，可以發現，總共就8個文件，其中可能真正項目中用得到的，也基本就是1個 swipe.js 文件。
index.html 和 style.css 本身是作為演示存在的，有興趣的可以研究一下。

那么我們具體如果使用它呢？很簡單，基本只要如下代碼即可：

以上代碼運行結果：

通過鼠標點擊或者放到手機上手指滑動，就可以看見幻燈片的運行效果了。當然，當前只是最基本的，全部都是默認配置。我們完全可以通過下面提供的參數，結合自己的需求，自義定出更好的效果來。

startSlide Integer (default:0) - index position Swipe should start at（滑動的索引值,即從*值開始滑動，默認值為0）

speed Integer (default:300) - speed of prev and next transitions in milliseconds.（滑動的速度，默認值300毫秒）

auto Integer - begin with auto slideshow (time in milliseconds between slides)（自動滑動，單位為毫秒）

continuous Boolean (default:true) - create an infinite feel with no endpoints（是否循環滑動，默認值為true）

disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page（停止任何觸及此容器上滾動頁面，默認值flase）

stopPropagation Boolean (default:false) - stop event propagation（停止事件傳播,默認值flase）

callback Function - runs at slide change.（回調函數）

transitionEnd Function - runs at the end slide transition.（滑動過渡時調用的函數）

下面就是官方給的演示例子：

window.mySwipe = new Swipe(document.getElementById("slider"), {
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

從中我們不難看出具體參數的使用方法和位置。這一個如果感興趣，可以根據需要，自己加入參數試試，都是以json對象存在于Swipe的第二個參數的。

那么除了以上參數，Swipe還提供了一些常用的方法（API）:

prev() slide to prev（上一頁）

next() slide to next（下一頁）

getPos() returns current slide index position（獲取當前索引位置）

getNumSlides() returns the total amount of slides（獲取所有滑塊總數）

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)（指數，持續時間）滑動設置索引位置（持續時間：轉型速度以毫秒為單位）

都是一些簡單的接口方法，你可以Js調用他們以達到你想要的效果。

地址

https://github.com/thebird/sw...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87957.html

移動端h5輪播插件swipe

摘要：在移動端的頁面里，我們經常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大家補充下可能需要的功能。在移動端的h5頁面里，我們經常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦swipe插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大...

funnyZhang 2019-08-22 13:58 評論0 收藏0
移動端h5輪播插件swipe

摘要：在移動端的頁面里，我們經常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大家補充下可能需要的功能。在移動端的h5頁面里，我們經常會有輪播圖的需求，如果不需要太多的效果，只是簡單的手指滑動和自動輪換效果的話，我比較推薦swipe插件，不過百度搜索到的這個插件，里面介紹的不是很完整，我給大...

Juven 2019-08-29 14:16 評論0 收藏0
移動端原生JS實現手指跟隨的觸控滑動

摘要：為了模擬原生應用的觸控效果，大量的應用使用了手指跟隨的滑動效果，也就是用手指滑動幻燈片的效果，什么是手指跟隨如圖網上滑動插件有不少，但好像沒一個好用的不是太多，就是不靈活這里用原生實現了該功能，不僅代碼量不多，邏輯也較簡單。為了模擬原生應用的觸控效果，大量的H5應用使用了手指跟隨的滑動效果，也就是用手指滑動幻燈片的效果，什么是手指跟隨,如圖；showImg(https://segm...

時飛 2019-08-21 10:41 評論0 收藏0
基于vue實現swipe輪播組件

摘要：項目背景圖片輪播是前端項目必有項，當前有很多效果很酷炫的輪播插件，例如。此處應該有掌聲，哈哈簡而言之，就是當需要一個簡單的輪播時，可以選用，自己寫一個組件。舉個栗子，就是我實現的這個基于實現分頁組件，移動端和端均適用哦。項目背景圖片輪播是前端項目必有項，當前有很多效果很酷炫的輪播插件，例如Swiper。但是當項目中的圖片輪播只需要一個很簡單的輪播樣式，比如這樣的showImg(ht...

Enlightenment 2019-08-22 10:42 評論0 收藏0