99re热视频这里只精品,久久久天堂国产精品女人,国产av一区二区三区,久久久精品成人免费看片,99久久精品免费看国产一区二区三区

移動端手指上下滑動切換插件pageSlider

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

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

用法

HTML結構

<!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();
});

設置 settings

初始化PageSlider組件時，支持傳入一個參數，用于配置組件功能

PageSlider.case(optOrIndex);

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

  • 參數optOrIndex也可以是一個json對象，允許的keys見下表

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

切換到指定頁面

在頁面初始化后，可調用組件的go方法跳轉到指定頁面。

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

以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號