帮酷LOGO
  • 显示原文与译文双语对照的内容
为移动端而生的滑动框架,无依赖,轻盈小巧,性能极致

  • 源代码名称:swiper
  • 源代码网址:http://www.github.com/wechatui/swiper
  • swiper源代码文档
  • swiper源代码下载
  • Git URL:
    git://www.github.com/wechatui/swiper.git
  • Git Clone代码到本地:
    git clone http://www.github.com/wechatui/swiper
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/wechatui/swiper
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • ##swiper

    为移动端而生的滑动框架,无依赖,轻盈小巧,性能极致

    体验

    扫描二维码

    demo

    http://wechatui.github.io/swiper

    ##安装

    ##用法

    <divclass="swiper">
        <divclass="item">
            <h2class="title fadeInUp animated">它无孔不入</h2>
        </div>
        <divclass="item">
            <h2class="title fadeInUp animated">你无处可藏</h2>
        </div>
        <divclass="item">
            <h2class="title fadeInUp animated">不是它可恶</h2>
        </div>
        <divclass="item">
            <h2class="title fadeInUp animated">而是它不懂你</h2>
        </div>
        <divclass="item">
            <h2class="title fadeInUp animated">我们试图</h2>
        </div>
        <divclass="item">
            <h2class="title fadeInUp animated">做些改变</h2>
        </div>
    </div>
    <scriptsrc="../swiper.js"></script>
    <script>var swiper =newSwiper();</script>

    同样,也swiper.js也支持AMDCMD规范,可以用requirejsseajs进行加载。

    <scriptsrc="path/to/require.js"></script>
    <script>require(['swiper'], function(Swiper){var swiper =newSwiper({direction:'horizontal'});    });</script>
    <scriptsrc="path/to/sea.js"></script>
    <script>seajs.use(['swiper'], function(Swiper){var swiper =newSwiper();    });//define(function(require, exports, module){//    var Swiper = require('Swiper');//    var swiper = new Swiper();//    //do something//});</script>

    ##API

    ###Swiper([option])

    option完整参数如下:

    • container:String,容器选择器,默认值.swiper

    • item:String,每一屏的选择器,默认值.item

    • direction:String,滑动方向,默认值vertical;横向滑动时为horizontal

    • activeClass: String,当前屏激活时添加的类名;默认值active

    • threshold:Number,滑动距离阈值,默认值50,当按住屏幕滑动超过此距离,松开手时,自动滑到下一屏,否则不滑动

    • duration:Number,滑屏动画时间,单位ms,默认值300;数值越小,滑动越快,越刺激

    ###事件

    on

    • swiped:滑动结束时,触发swiped事件,回调函数传入两个参数,分别是上一屏和当前屏索引,从0算起。举例,从第一屏滑动到第二屏结束时:
    var swiper =newSwiper();
        swiper.on('swiped', function(prev, current){
            console.log('上一屏:', prev); // 0console.log('当前屏:', current); // 1    });

    方法

    • next: 主动滑动到下一屏。
        var swiper = new Swiper();
        swiper.next();
    • go: 主动滑动到指定界面。
        var swiper = new Swiper();
        swiper.go(1);

    ##License

    swiper is available under the terms of the MIT License.




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语