仿APP系列 - 超级强大的拖动插件（支持块级的拖拉，左右拖拉）

事实上不太适合做上拉刷新和下拉加载

官方地址

http://idangero.us/swiper

demo

http://idangero.us/swiper/demos/#.V5YV4_mF4dU

API手册

http://idangero.us/swiper/api/

新手教学

http://idangero.us/swiper/get-started/#.V5YXKfmF4dU

脚手架

<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
</head>
<body>

<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script></body> </html>

实战demo

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

<head>
    <link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
</head>
<style type="text/css">
.swiper-container,

  html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        font-size: 18px;
        height: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

</style>

<body>
    <!-- Slider main container -->
    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
             <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
             <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
             <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
             <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
             <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
             <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 轮播图 -->
        <!-- <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>  -->
        <div class="swiper-scrollbar"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
    <script>
    $(function() {
        var isLoader = false;
        var mySwiper = new Swiper('.swiper-container', {
            /* 垂直方向 */
            direction: 'vertical',
            /* 每次滑动或者显示的数量 */
            slidesPerView: 10,
            /* 是否允许滑轮滚动 */
            mousewheelControl: true,
            /* 是否无限循环 */
            loop: false,

            /* 自由模式 */
            freeMode: true,

            /* 分页 */
            // pagination: '.swiper-pagination',
            /* 上一页按钮 */
            // nextButton: '.swiper-button-next',
            /* 下一页按钮 */
            // prevButton: '.swiper-button-prev',

            /* 滚动条 */
            scrollbar: '.swiper-scrollbar',

            // 滚动到顶部事件（页面加载时会触发）
            onReachBeginning: function() {
                console.log("Reach Begin");
            },

            // 滚动到顶部事件（页面加载时，如果数目太少会触发）
            onReachEnd: function() {

                mySwiper.slideTo(0, 1000, function(){console.log("done")});

                if (isLoader == false) {
                    /* 加载中 */
                    mySwiper.appendSlide("<div class='swiper-slide'>数据加载中...</div>");

                    isLoader = true; /*暂时加锁，等数据加载完成之后再解锁更改为false
                }

            }
        })
    })
    </script>
</body>

</html>

仿APP系列 - 超级强大的拖动插件（支持块级的拖拉，左右拖拉）的更多相关文章

Web程序员开发App系列 - 开发我的第一个App，源码下载
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
Web程序员开发App系列 - 认识HBuilder
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
Cordova入门系列（三）Cordova插件调用转发 https://www.cnblogs.com/lishuxue/p/6018416.html
Cordova入门系列(三)Cordova插件调用版权声明:本文为博主原创文章,转载请注明出处上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心 ...
转载：超级强大的vim配置(vimplus)--续集
超级强大的vim配置(vimplus)--续集原文地址:https://www.cnblogs.com/highway-9/p/5984285.html An automatic configura ...
Web程序员开发App系列 - 调试Android和IOS手机代码（补图）
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
Web程序员开发App系列 - 申请苹果开发者账号
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
cVim—Chrome上更强大的vim插件
cVim——Chrome上更强大的vim插件介绍也许很多人在chrome上都用过类似Vimium, ViChrome的插件,这些插件的目的都差不多,就是在浏览器中提供一些类似vim的操作来提高效率 ...
iOS高仿app源码：纯代码打造高仿优质《内涵段子》
iOS高仿app源码:纯代码打造高仿优质<内涵段子>收藏下来字数1950 阅读4999 评论173 喜欢133 Github 地址 https://github.com/Charlesy ...
js 模板引擎 - 超级强大
本来没想写这篇文章,但是网上误导大众的文章太多了,所以今天就抽出半小时时间谈一下我对前端模板引擎的感受吧. 前端模板引擎相信大家都再熟悉不过了,市面上非常多的号称最好.最快.最牛逼的,随便就能找到一大 ...

随机推荐

取余运算（codevs 1497）
题目描述 Description 输入b,p,k的值,编程计算bp mod k的值.其中的b,p,k*k为长整型数(2^31范围内). 输入描述 Input Description b p k 输出描 ...
Catch That Cow（poj 3278）
给定两个整数n和k 通过 n+1或n-1 或n*2 这3种操作,使得n==k 输出最少的操作次数 //广搜,a是队列,step记录步数,vis记录哪些数被搜到过 #include<cstdio& ...
提高IO性能
noatime - 不更新文件系统上 inode 访问记录,可以提升性能 [root@ok etc]# cat /etc/fstab |grep noatime /dev/mapper/vg_ok-l ...
mongoDb学习以及spring管理
1.windows下的安装http://www.cnblogs.com/liuzhiying/p/5915741.html 2.慕课网学习单机操作mongoDb 赋权限:http://blog.csd ...
angular语法：Controller As
这个东东我觉得很好哟. 数据可以在同一个页面的不同的controller之间自由穿梭... 当然, https://thinkster.io/a-better-way-to-learn-angular ...
Scala入门
搭建环境请参考: http://www.cnblogs.com/super-d2/p/4534208.html 1.交互式编程: adeMacBook-Pro:ssdb-master apple$ s ...
基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...
表现层(jsp)、持久层(类似dao)、业务层（逻辑层、service层）、模型（javabean）、控制层（action）
转自:http://www.blogjava.net/jiabao/archive/2007/04/08/109189.html 为了实现web层(struts)和持久层(Hibernate)之间的松 ...
VMware-WorkStation 序列号(转)
原文摘自: http://blog.csdn.net/twlkyao/article/details/8681927 最近升级了下虚拟机,可是还要序列号,网上找了几个可以用的,留着,备用. 9.0.2 ...
uva 10972(边双连通分量）
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=33804. 思路:和poj的一道题有点像,不过这道题图可能不连通,因 ...

仿APP系列 - 超级强大的拖动插件（支持块级的拖拉，左右拖拉）

仿APP系列 - 超级强大的拖动插件（支持块级的拖拉，左右拖拉）的更多相关文章

随机推荐

热门专题