移動(dòng)端手指上下滑動(dòng)切換插件pageSlider

2021-10-18 16:28 更新
ie兼容10
插件描述：PageSlider 是一個(gè)基于zepto.js用于實(shí)現(xiàn)H5單頁面跟隨手指上下滑動(dòng)切換的組件，支持通過transform3D啟動(dòng)GPU加速，目前僅支持移動(dòng)端touch設(shè)備。

請用手機(jī)掃描演示頁二維碼,或pc端瀏覽器模擬移動(dòng)端查看效果。

用法

HTML結(jié)構(gòu)

<!DOCTYPE html>
<html>
    <head>
      <!-- styles, scripts, etc -->
    </head>
    <body>
        <div class="section sec1"></div>
        <div class="section sec2"></div>
        <div class="section sec3"></div>
        <div class="section sec4"></div>
    </body>
</html>

在頁面中引入組件所需樣式表文件pageSlider.css

<link rel="stylesheet" href="../dist/pageSlider.css">

本組件基于zepto，需要在頁面中引入zepto.js文件

<script src='http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js'></script>

引入pageSlider.js/pageSlider.min.js文件

<script src='../dist/pageSlider.js'></script>

在頁面DOM加載完畢之后，初始化組件

$(function() {
    var pageSlider = PageSlider.case();
});

設(shè)置 settings

初始化PageSlider組件時(shí)，支持傳入一個(gè)參數(shù)，用于配置組件功能

PageSlider.case(optOrIndex);

  • 參數(shù)optOrIndex可以是一個(gè)數(shù)字(number),用于設(shè)置初始顯示的頁碼

  • 參數(shù)optOrIndex也可以是一個(gè)json對象，允許的keys見下表

key類型默認(rèn)值描述
startPagenumber1初始化時(shí)顯示頁面的頁碼
rangenumber70頁面回彈的最大距離(像素)，小于該值頁面回彈，超過該值頁面將切換
durationnumber200頁面回彈動(dòng)畫持續(xù)的時(shí)間(毫秒)
loopbooleanfalse是否循環(huán)切換
elasticbooleantrue位于頂部(底部)時(shí)，是否依然可以向上(向下)拉動(dòng)
translate3dbooleanboolean是否使用translate3d(在支持translate3d的設(shè)備上)，使用translate3d會(huì)使一些設(shè)備開啟GPU加速，滑動(dòng)更流暢
callbackobject{}頁面切換回調(diào)函數(shù)集合。該json對象每個(gè)鍵為一個(gè)數(shù)值，對應(yīng)一個(gè)頁碼，值為一個(gè)function,滑動(dòng)到該頁面時(shí)觸發(fā)。如：{2:function(){alert('滑動(dòng)到了第二頁');},4:function(){alert('滑動(dòng)到了第四頁');}} 滑動(dòng)到第二和第四頁時(shí)將觸發(fā)對應(yīng)的回調(diào)函數(shù)
PageSlider.case({loop:true});

切換到指定頁面

在頁面初始化后，可調(diào)用組件的go方法跳轉(zhuǎn)到指定頁面。

//PageSlider初始化
var pageSlider = PageSlider.case();
//跳轉(zhuǎn)到第3頁
pageSlider.go(3);

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號