移动端手指上下滑动切换插件pageSlider

最新推荐文章于 2022-08-15 16:16:39 发布

小飞1116

最新推荐文章于 2022-08-15 16:16:39 发布

阅读量4.3k

点赞数

文章标签： PageSlider H5页面滑动组件 jQuery

转载于（下载该插件）： http://www.jq22.com/jquery-info8395###

PageSlider 是一个基于zepto.js用于实现H5单页面跟随手指上下滑动切换的组件，支持通过transform3D启动GPU加速，目前仅支持移动端touch设备。

支持浏览器： Chrome、Firefox、Safari、IE10及以上

用法
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.

<link rel="stylesheet" href="../dis/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 类型默认值描述

startPage number 1 初始化时显示页面的页码
range number 70 页面回弹的最大距离(像素)，小于该值页面回弹，超过该值页面将切换
duration number 200 页面回弹动画持续的时间(毫秒)
loop boolean false 是否循环切换
elastic boolean true 位于顶部(底部)时，是否依然可以向上(向下)拉动
translate3d boolean boolean 是否使用translate3d(在支持translate3d的设备上)，使用translate3d会使一些设备开启GPU加速，滑动更流畅
callback object {} 页面切换回调函数集合。该json对象每个键为一个数值，对应一个页码，值为一个function,滑动到该页面时触发。如：{2:function(){alert(‘滑动到了第二页’);},4:function(){alert(‘滑动到了第四页’);}}
滑动到第二和第四页时将触发对应的回调函数
PageSlider.case({loop:true});

切换到指定页面
在页面初始化后，可调用组件的go方法跳转到指定页面。

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

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <title>demo - pageSlider</title>
    <!--引入pageSlider所需样式表-->
    <link rel="stylesheet" href="dist/pageSlider.css">
    <!--引入zepto.js-->
    <script src="http://cdn.bootcss.com/zepto/1.1.4/zepto.js"></script>
    <!--引入pageSlider.js文件-->
    <script src="dist/pageSlider.js"></script>
<body>
    <!--DOM结构-->
    <div class="section sec1" style="background-color:#FFCCCC;">1<p>移动端中向下滑动</p></div>
    <div class="section sec2" style="background-color:#4ACBF7;">2</div>
    <div class="section sec3" style="background-color:#63E339;">3</div>
    <div class="section sec4" style="background-color:#F7D34A;">4</div>
    <div class="section sec5" style="background-color:#FF8ECE;">5</div>
    <div class="section sec6" style="background-color:#ACDCED;">6</div>

    <script>
        //$(function(){
            var pageSlider = PageSlider.case();
        //});
    </script>
</body>
</html>

小飞1116

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
4
评论
移动端手指上下滑动切换插件pageSlider

转载于（下载该插件）： http://www.jq22.com/jquery-info8395###PageSlider 是一个基于zepto.js用于实现H5单页面跟随手指上下滑动切换的组件，支持通过transform3D启动GPU加速，目前仅支持移动端touch设备。支持浏览器： Chrome、Firefox、Safari、IE10及以上用法 HTML结构<!DOCTYPE html><ht
复制链接

扫一扫