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

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

請(qǐng)用手機(jī)掃描演示頁(yè)二維碼,或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>

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

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

本組件基于zepto，需要在頁(yè)面中引入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>

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

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

設(shè)置 settings

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

PageSlider.case(optOrIndex);

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

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

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

切換到指定頁(yè)面

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

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

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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)