星期二, 2016-08-23 09:22 — adminshiping1

SlipJs可以让你的手机网站像原生手机软件一样惯性滚动，手触图片轮换等等。

为什么用 SlipJs?

简单易用

几句简单的代码就可以实现复杂完美的效果，加上详细的中文教程，这一切都使你能快速的使用SlipJs。

追求极致的高性能

SlipJs 的每一行代码都追求极致的高性能，并独创完美 , 流畅双核模式

很小

SlipJs 很小，仅仅只有12kb（无zip压缩）帮你节省珍贵的移动流量。

兼容Android iOS

SlipJs 可以完美的运行在这最流行的两大平台上。

来自 http://www.oschina.net/p/slipjs

开始之前你可以使用手机访问SlipJs的演示例子：slipjs.com/demo

二维码：

下载SlipJs请访问SlipJs官方网站：www.slipjs.com

除了这篇文章还另一篇进阶性的文章：SlipJs API详细

进入正题如何使用SlipJs，很简单只要两步：

提示：具体如何使用SlipJs实现演示例子slipjs.com/demo中的效果，请下载并参考演示例子的源码，下载地址：www.slipjs.com

第一步：载入slip.js，你只需下载并在你的页面中载入slip.js；

第二步：使用函数slip(mode, core, para)；

该函数有三个参数:　　

第一个参数：mode ，可以为"px"或者"page"。

为"px" 时将实现惯性滚动的效果（类似slipjs.com/dome中的第一个例子），

为"page" 时将实现类似图片轮换的换屏效果（类似slipjs.com/dome中的第一个例子）。

例如：

slip("px",  core,  para); 
// 或者
slip("page",  core,  para);

第二个参数：core ，这个参数传递的是运动的对象，例如：

var core = document.getElementById("core");
slip('px', core, para);

第三个参数：para ，这个参数是一个对象子面量，该参数在px惯性滚动状态下和在page换屏状态下可传递的内容存在差别。

首先是这两种状态下均可传递的参数有：

slip('px', core, {
        startFun: function,   // 触摸开始时执行的函数
         moveFun: function,   // 触摸过程中执行的函数
     touchEndFun: function,   // 触摸结束时执行的函数
          endFun: function    // 滑动结束时执行的函数
});

page换屏状态下独有的参数：

slip('page', core, {
              num: 3,        // 屏数，例如轮换图片是图片的张数（必需）
      change_time: 3000,     // 图片自动轮换的时间
      lastPageFun: function, // 用户在滑动到最后一屏后仍然滑动下一屏时执行的函数（可用于图片浏览时使用）,更详细请看下文
     firstPageFun: function, // 用户在滑动到第一屏后仍然滑动上一屏时执行的函数（可用于图片浏览时使用），更详细请看下文
        no_follow: true      // 是否跟随手指移动来完成换屏，ture为不跟随，默认跟随，更详细请看下文
             loop: true      // slipjs3.5.0开始支持，可以实现无限滑动下一张（最后一张时继续滑可以回到第一张）
});

px惯性滚动状态下独有的参数：

slip('px', core, {
       direction: 'x',   // 设置滑动方向,"x"为横向滑动，默认为纵向滑动。
         perfect: true,  // 是否启用完美模式，true为启用，何为完美模式，更详细请看下文
          no_bar: true,  // 是否启用模仿滚动条，true为不启用，默认启用
     bar_no_hide: true,  // 是否在滚动停止时隐藏滚动条，true为不隐藏，默认隐藏
      core_width: 1000,  // 滑动元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度），更详细请看下文
           width: 400,   // 滑动元素的父级元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度），更详细请看下文
         bar_css: "background-color: rgba(8, 97, 149, 0.5);"  // 自定义滚动条的样式
});

现在你就可以预览效果了。

更详细的参数说明

看到这里如果你存在疑问那我猜可能会集中在几个参数的用法上，这些参数包括

page换屏状态下的

 lastPageFun: function, // 用户在滑动到最后一屏后仍然滑动下一屏时执行的函数（可用于图片浏览时使用）,更详细请看下文
firstPageFun: function, // 用户在滑动到第一屏后仍然滑动上一屏时执行的函数（可用于图片浏览时使用），更详细请看下文
   no_follow: true      // 是否跟随手指移动来完成换屏，ture为不跟随，默认跟随，更详细请看下文

px惯性滚动状态下的

   perfect: true,  // 是否启用完美模式，true为启用，何为完美模式，更详细请看下文

接下来我将一个个详细讲解

lastPageFun: function // 用户在滑动到最后一屏后仍然滑动下一屏时执行的函数。
//你想象一下：你现在是用px换屏模式来做一个图片放大并可滑动查看下一张的功能，这时你的用户滑动到了
最后一张还想继续查看下一张，你想提醒用户已经到最后一张了，那么这些提示的代码就可以放在这个函数中。

no_follow: true      // 是否跟随手指移动来完成换屏，ture为不跟随，默认跟随。以图片轮换为例，
你可能发现现在互联网上的手机网站图片轮换功能基本可以分为两类，一类是你手指在上面滑动的时候图片会跟随你手指移动，
另一类是你手指在上面滑动时没有反应，只有你手指离开的时候吹滑动到下一张。通过这个参数你可以任选一种适合你的方式。

perfect: true  // 是否启用完美模式，true为启用，何为完美模式。所谓完美模式是对应流畅模式而言的，
完美模式和流畅模式的区别表现在于滚动条的变化，完美模式下滚动条在滚动到底部或者顶部的时候大小会变化，
而流畅模式则没这个视觉效果。理论上流畅模式要比完美模式反应效率等各方面更快，其中的区别在表现上是滚
动条的区别，其实是实现形式的不同使得流畅模式的无法实现这一视觉效果。

更多关于SlipJs 的想法，欢迎同时感谢把你的建议写成邮件给送我，398791472@qq.com

来自 http://www.cnblogs.com/haoming/archive/2013/02/18/2916182.html

SlipJs API详细

refresh(core_width, width)：

当在滚动对象的大小发生改变时（如：当用户滚动到底部时你通过ajax加载新内容，这时元素的尺寸会改变）必须调用refresh方法。主要用处是让SlipJs及时感知尺寸的变化以便正常工作。

// 参数说明:这两个参数都是可选的。
// core_width: 滑动元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度）
// width:      滑动元素的父级元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度）
// 例如：
var slipjs = slipjs('px',core);

// 当元素的尺寸改变时，我们需要将新的尺寸给refresh:
slipjs.refresh(1000,400);
// 也可以不传递参数，这时SlipJs将自己通过获取元素的实际尺寸。

toPage(num, time)：

page换屏状态下是用toPage可以滑动到指定屏数。

// 参数说明：
// num  : 要到达的屏数
// time : 设定过程花费的时间,单位ms
// 例如 :
var slipjs = slip('page', core, {
    num: 3
});

// 这时我们想要用3秒的时间缓慢地轮换到第3屏就可以这样：
slipjs.toPage(3, 3000);

that.page

可在page换屏状态的startFun moveFun touchEndFun endFun 这4个函数中获取当前所在的页（屏）数。

function end() {
    alert(this.page);// 在滑动结束后输出当前的页(屏)数
}
slip('page', bar_list_div, {
    num: 3,
    endFun: end
});

提示：该api在图片轮换中导航小点的变化需要用到该api。

注释：关于startFun moveFun touchEndFun endFun 这4个函数的用法详见：SlipJs快速使用教程

this.xy

当你想在 startFun moveFun touchEndFun endFun 这4个函数中获取滑动元素的坐标时可直接使用 this.xy 来获取，当状态为横向滑动时该值是滑动元素的x坐标，当状态为纵向滑动时该值是滑动元素的y坐标。

例如：

function move() {
    console.log(this.xy);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});

提示：该api在“下拉刷新”的例子中使用到，在加载数据时非常有用。

this.wide_high（3.0.1开始支持）

当你想在 startFun moveFun touchEndFun endFun 这4个函数中获取滑动元素的宽或者高（横向滑动的时候是宽，上下滑动时是高）可直接使用 this.wide_high来获取，当状态为横向滑动时该值是滑动元素的width，当状态为纵向滑动时该值是滑动元素的height。例如：

function move() {
    console.log(this.wide_high);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});

this.parent_wide_high（3.0.1开始支持）

当你想在 startFun moveFun touchEndFun endFun 这4个函数中获取滑动元素父级元素的宽或者高（横向滑动的时候是宽，上下滑动时是高）可直接使用 this.parent_wide_high来获取，当状态为横向滑动时该值是父级元素的width，当状态为纵向滑动时该值是父级元素的height。例如：

function move() {
    console.log(this.parent_wide_high);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});

backward和forward（3.5.0开始支持）

以图片轮换为例，现在你想要添加两个按钮，一个按钮为“上一张”，另一个为“下一张”，那么这是你就可以是使用backward和forward了，具体使用方法如下：

var slip_img = slip('page',change_screen_ul,{
        change_time: 5000,
                      num: 3
});
document.getElementById("backward").onclick = function(){
    slip_img.backward(); // 上一张
}
document.getElementById("forward").onclick = function(){
    slip_img.forward(); // 下一张
}

其他相关文章：SlipJs快速使用教程

或许你有更多关于SlipJs api的想法，欢迎同时感谢把你的建议写成邮件给送我，398791472@qq.com

来自 http://www.cnblogs.com/haoming/archive/2013/02/19/2917151.html

[分享] SlipJs API详细

refresh(core_width, width)：

[JavaScript] 纯文本查看复制代码运行代码

// 参数说明:这两个参数都是可选的。
// core_width: 滑动元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度）
// width:      滑动元素的父级元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度）
// 例如：
var slipjs = slipjs('px',core);
 
// 当元素的尺寸改变时，我们需要将新的尺寸给refresh:
slipjs.refresh(1000,400);
// 也可以不传递参数，这时SlipJs将自己通过获取元素的实际尺寸。

toPage(num, time)：

page换屏状态下是用toPage可以滑动到指定屏数。

[JavaScript] 纯文本查看复制代码运行代码

// 参数说明：
// num  : 要到达的屏数
// time : 设定过程花费的时间,单位ms
// 例如 :
var slipjs = slip('page', core, {
    num: 3
});
 
// 这时我们想要用3秒的时间缓慢地轮换到第3屏就可以这样：
slipjs.toPage(3, 3000);

that.page

可在page换屏状态的startFun moveFun touchEndFun endFun 这4个函数中获取当前所在的页（屏）数。

[JavaScript] 纯文本查看复制代码运行代码

function end() {
    alert(this.page);// 在滑动结束后输出当前的页(屏)数
}
slip('page', bar_list_div, {
    num: 3,
    endFun: end
});

提示：该api在图片轮换中导航小点的变化需要用到该api。

注释：关于startFun moveFun touchEndFun endFun 这4个函数的用法详见：SlipJs快速使用教程

this.xy

当你想在 startFun moveFun touchEndFun endFun 这4个函数中获取滑动元素的坐标时可直接使用 this.xy 来获取，当状态为横向滑动时该值是滑动元素的x坐标，当状态为纵向滑动时该值是滑动元素的y坐标。

例如：

[JavaScript] 纯文本查看复制代码运行代码

function move() {
    console.log(this.xy);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});

提示：该api在“下拉刷新”的例子中使用到，在加载数据时非常有用。

this.wide_high（3.0.1开始支持）

当你想在 startFun moveFun touchEndFun endFun 这4个函数中获取滑动元素的宽或者高（横向滑动的时候是宽，上下滑动时是高）可直接使用 this.wide_high来获取，当状态为横向滑动时该值是滑动元素的width，当状态为纵向滑动时该值是滑动元素的height。例如：

[JavaScript] 纯文本查看复制代码运行代码

function move() {
    console.log(this.wide_high);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});

this.parent_wide_high（3.0.1开始支持）

当你想在 startFun moveFun touchEndFun endFun 这4个函数中获取滑动元素父级元素的宽或者高（横向滑动的时候是宽，上下滑动时是高）可直接使用 this.parent_wide_high来获取，当状态为横向滑动时该值是父级元素的width，当状态为纵向滑动时该值是父级元素的height。例如：

[JavaScript] 纯文本查看复制代码运行代码

function move() {
    console.log(this.parent_wide_high);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});

backward和forward（3.5.0开始支持）

以图片轮换为例，现在你想要添加两个按钮，一个按钮为“上一张”，另一个为“下一张”，那么这是你就可以是使用backward和forward了，具体使用方法如下：

[JavaScript] 纯文本查看复制代码运行代码

var slip_img = slip('page',change_screen_ul,{
        change_time: 5000,
                      num: 3
});
document.getElementById("backward").onclick = function(){
    slip_img.backward(); // 上一张
}
document.getElementById("forward").onclick = function(){
    slip_img.forward(); // 下一张
}

等待大神的到来！！！
买吧：http://youshopping.cn http://www.youshopping.cn 手机版http://m.youshopping.cn
U优生活：http://meiyifang.uz.taobao.com

拖动排序, jq插件, slipjs, 手机版, 排序

来自 http://www.softwhy.com/forum.php?mod=viewthread&tid=15523

使用Slip.js快速创建整屏滑动的手机网页

时间 2014-10-05 00:28:21 SegmentFault

原文 http://segmentfault.com/blog/laopopo/1190000000708417

主题 HTML

现在滑屏网页越来越多，比如我在搜狐视频就做了好几个，举个例子，可以用手机扫描以下的二维码访问：

搜狐视频客户端完美适配iOS8

之前写这样的页面可能还要纠结选择什么库，然后再写一堆 touch 的事件，再加上写样式写HTML，可能几个小时就这么过去，才算完成。

现在不一样了。

有了 Slip.js ，你只管写HTML，CSS，如果逻辑简单，一行JS代码就可以搞定，大大提升了开发的效率。不吹牛，上面的demo，不到半小时我就写好了。

具体怎么做呢？比如有个需求是：

我们有4个页面，每个页面有一张图片，每次手指滑动都切换一整屏。

首先看HTML：

<!doctype html>
...
<script type="text/javascript" src="slip.js"></script>
<body>
...
<div id="container">
  <div class="page page-1"><img src="img/1.png"></div>
  <div class="page page-2"><img src="img/2.png"></div>
  <div class="page page-3"><img src="img/3.png"></div>
  <div class="page page-4"><img src="img/4.png"></div>
</div>
</body>

再看CSS:

/* 按自己需要来定义吧，不写也没关系 */

最后看JS：

var container = document.getElementById('container');
var pages = document.querySelectorAll('.page');
var slip = Slip(container, 'y').webapp(pages);

就这么简单，可以查看效果。

搜狐视频客户端完美适配iOS8

解说：

Slip ：暴露到全局的方法，只要你引入 slip.js ，就可以得到这个实用牛逼的方法。
container : 被滑动的容器，里面是每个滑动页面。
'y' : 页面滑动的方向，你也可以传入 'x' 。
webapp : 设置页面展现为全屏滑动页面的方法。
pages : 页面元素列表。

说好的一行代码搞定的：

Slip(document.getElementById('container'), 'y').webapp();

可以发现，上面的一行代码并没有定义 pages :

当 webapp 方法不传递参数的时候，Slip会获取 container 的直接子元素（儿子元素）作为 pages 。

至此，一个 全屏滑动网页 就完成了，难以想象的简单快速。我用半小时，你10分钟应该就可以。

当然： Slip.js 还有很多更强大的功能，比如你可以自己定义页面滑动时要做什么，PM看你完成的这么快，就给你加了很有意思的需求：

当页面滑动到最后一页的时候，刷新一下。。。

你只需要加几行代码就可以搞定：

Slip(document.getElementById('container'), 'y').webapp().end(function() {
  if (this.page === 3) location.reload();
});

看，是不是很简单，是不是还没来得及抱怨这个需求，就已经完成它了，是不是有种前所未有的快感。来看看效果吧。

搜狐视频客户端完美适配iOS8

注意：页数是从0开始的 ，所以上面的最后一页是3，而不是4。

如果你看到了这里还没离开，我想你对 Slip.js 应该还是至少有点兴趣的，那么你可以去 Github 关注它。

如果想迫切试用 Slip.js ，可以直接查看文档。

如果想要看看 Slip.js 如何实现，可以查看源码。

来自 http://www.tuicool.com/articles/MFZRNv

SlipJs快速使用教程

2014-04-01 17:06　来源：www.lanrenmaku.com / 作者：懒人已被阅读：538次　分类：资源荟萃　上一篇：JavaScript 移动和触摸框架下一篇：Pro Git 简体中文版

开始之前你可以使用手机访问SlipJs的演示例子：slipjs.com/demo

二维码：

下载SlipJs请访问SlipJs官方网站：www.slipjs.com

除了这篇文章还另一篇进阶性的文章：SlipJs API详细

进入正题如何使用SlipJs，很简单只要两步：

提示：具体如何使用SlipJs实现演示例子slipjs.com/demo中的效果，请下载并参考演示例子的源码，下载地址：www.slipjs.com

第一步：载入slip.js，你只需下载并在你的页面中载入slip.js；

第二步：使用函数slip(mode, core, para)；

该函数有三个参数:　　

第一个参数：mode ，可以为"px"或者"page"。

为"px" 时将实现惯性滚动的效果（类似slipjs.com/dome中的第一个例子），

为"page" 时将实现类似图片轮换的换屏效果（类似slipjs.com/dome中的第一个例子）。

例如：

slip("px", core, para); // 或者 slip("page", core, para);

第二个参数：core ，这个参数传递的是运动的对象，例如：

var core = document.getElementById("core"); slip('px', core, para);

第三个参数：para ，这个参数是一个对象子面量，该参数在px惯性滚动状态下和在page换屏状态下可传递的内容存在差别。

首先是这两种状态下均可传递的参数有：

slip('px', core, { startFun: function, // 触摸开始时执行的函数 moveFun: function, // 触摸过程中执行的函数touchEndFun: function, // 触摸结束时执行的函数 endFun: function // 滑动结束时执行的函数 });

page换屏状态下独有的参数：

slip('page', core, { num: 3, // 屏数，例如轮换图片是图片的张数（必需） change_time: 3000, // 图片自动轮换的时间 lastPageFun:function, // 用户在滑动到最后一屏后仍然滑动下一屏时执行的函数（可用于图片浏览时使用）,更详细请看下文 firstPageFun: function, // 用户在滑动到第一屏后仍然滑动上一屏时执行的函数（可用于图片浏览时使用），更详细请看下文 no_follow: true // 是否跟随手指移动来完成换屏，ture为不跟随，默认跟随，更详细请看下文 loop: true // slipjs3.5.0开始支持，可以实现无限滑动下一张（最后一张时继续滑可以回到第一张） });

px惯性滚动状态下独有的参数：

slip('px', core, { direction: 'x', // 设置滑动方向,"x"为横向滑动，默认为纵向滑动。 perfect: true, // 是否启用完美模式，true为启用，何为完美模式，更详细请看下文 no_bar: true, // 是否启用模仿滚动条，true为不启用，默认启用bar_no_hide: true, // 是否在滚动停止时隐藏滚动条，true为不隐藏，默认隐藏 core_width: 1000, // 滑动元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度），更详细请看下文 width: 400, // 滑动元素的父级元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度），更详细请看下文 bar_css: "background-color: rgba(8, 97, 149, 0.5);" // 自定义滚动条的样式 });

现在你就可以预览效果了。

更详细的参数说明

看到这里如果你存在疑问那我猜可能会集中在几个参数的用法上，这些参数包括

page换屏状态下的

lastPageFun: function, // 用户在滑动到最后一屏后仍然滑动下一屏时执行的函数（可用于图片浏览时使用）,更详细请看下文 firstPageFun: function, // 用户在滑动到第一屏后仍然滑动上一屏时执行的函数（可用于图片浏览时使用），更详细请看下文 no_follow: true // 是否跟随手指移动来完成换屏，ture为不跟随，默认跟随，更详细请看下文

px惯性滚动状态下的

perfect: true, // 是否启用完美模式，true为启用，何为完美模式，更详细请看下文

接下来我将一个个详细讲解

lastPageFun: function // 用户在滑动到最后一屏后仍然滑动下一屏时执行的函数。
//你想象一下：你现在是用px换屏模式来做一个图片放大并可滑动查看下一张的功能，这时你的用户滑动到了
最后一张还想继续查看下一张，你想提醒用户已经到最后一张了，那么这些提示的代码就可以放在这个函数中。

no_follow: true // 是否跟随手指移动来完成换屏，ture为不跟随，默认跟随。以图片轮换为例，
你可能发现现在互联网上的手机网站图片轮换功能基本可以分为两类，一类是你手指在上面滑动的时候图片会跟随你手指移动，
另一类是你手指在上面滑动时没有反应，只有你手指离开的时候吹滑动到下一张。通过这个参数你可以任选一种适合你的方式。

perfect: true // 是否启用完美模式，true为启用，何为完美模式。所谓完美模式是对应流畅模式而言的，
完美模式和流畅模式的区别表现在于滚动条的变化，完美模式下滚动条在滚动到底部或者顶部的时候大小会变化，
而流畅模式则没这个视觉效果。理论上流畅模式要比完美模式反应效率等各方面更快，其中的区别在表现上是滚
动条的区别，其实是实现形式的不同使得流畅模式的无法实现这一视觉效果。

http://www.slipjs.com

来自 http://www.lanrenmaku.com/assemble/2014_0401_1138.html

SlipJs 能做什么？SlipJs可以让你的手机网站像原生手机软件一样惯性滚动，手触图片轮换等等。

refresh(core_width, width)：

当在滚动对象的大小发生改变时（如：当用户滚动到底部时你通过ajax加载新内容，这时元素的尺寸会改变）必须调用refresh方法。主要用处是让SlipJs及时感知尺寸的变化以便正常工作。

// 参数说明:这两个参数都是可选的。
// core_width: 滑动元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度）
// width:      滑动元素的父级元素的宽度或者高度，单位为px（横向滑动时传递宽度，纵向滑动时传递高度）
// 例如：
var slipjs = slipjs('px',core);

// 当元素的尺寸改变时，我们需要将新的尺寸给refresh:
slipjs.refresh(1000,400);
// 也可以不传递参数，这时SlipJs将自己通过获取元素的实际尺寸。

toPage(num, time)：

page换屏状态下是用toPage可以滑动到指定屏数。

// 参数说明：
// num : 要到达的屏数
// time : 设定过程花费的时间,单位ms
// 例如 :
var slipjs = slip('page', core, {
    num: 3
});

// 这时我们想要用3秒的时间缓慢地轮换到第3屏就可以这样：
slipjs.toPage(3, 3000);

that.page

可在page换屏状态的startFun moveFun touchEndFun endFun 这4个函数中获取当前所在的页（屏）数。

function end() {
    alert(this.page);// 在滑动结束后输出当前的页(屏)数
}
slip('page', bar_list_div, {
    num: 3,
    endFun: end
});

提示：该api在图片轮换中导航小点的变化需要用到该api。

注释：关于startFun moveFun touchEndFun endFun 这4个函数的用法详见：SlipJs快速使用教程

this.xy

当你想在 startFun moveFun touchEndFun endFun 这4个函数中获取滑动元素的坐标时可直接使用 this.xy 来获取，当状态为横向滑动时该值是滑动元素的x坐标，当状态为纵向滑动时该值是滑动元素的y坐标。

例如：

function move() {
    console.log(this.xy);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});
提示：该api在“下拉刷新”的例子中使用到，在加载数据时非常有用。

this.wide_high（3.0.1开始支持）

当你想在 startFun moveFun touchEndFun endFun 这4个函数中获取滑动元素的宽或者高（横向滑动的时候是宽，上下滑动时是高）可直接使用 this.wide_high来获取，当状态为横向滑动时该值是滑动元素的width，当状态为纵向滑动时该值是滑动元素的height。例如：

function move() {
    console.log(this.wide_high);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});
this.parent_wide_high（3.0.1开始支持）

当你想在 startFun moveFun touchEndFun endFun 这4个函数中获取滑动元素父级元素的宽或者高（横向滑动的时候是宽，上下滑动时是高）可直接使用 this.parent_wide_high来获取，当状态为横向滑动时该值是父级元素的width，当状态为纵向滑动时该值是父级元素的height。例如：

function move() {
    console.log(this.parent_wide_high);// 在滑动过程中输出滑动元素当前的y坐标
}
slip('px', bar_list_div, {
    moveFun: move
});
backward和forward（3.5.0开始支持）

以图片轮换为例，现在你想要添加两个按钮，一个按钮为“上一张”，另一个为“下一张”，那么这是你就可以是使用backward和forward了，具体使用方法如下：

var slip_img = slip('page',change_screen_ul,{
        change_time: 5000,
                      num: 3
});
document.getElementById("backward").onclick = function(){
    slip_img.backward(); // 上一张
}
document.getElementById("forward").onclick = function(){
    slip_img.forward(); // 下一张
}

来自 http://www.bcty365.com/content-69-1297-1.html

普通分类:

javascript

You are here

slipjs 滚动滑动一屏滑动有大用有大大用

SlipJs可以让你的手机网站像原生手机软件一样惯性滚动，手触图片轮换等等。

为什么用 SlipJs?

简单易用

追求极致的高性能

很小

兼容Android iOS

SlipJs API详细

使用Slip.js快速创建整屏滑动的手机网页

SlipJs快速使用教程

友情链接

搜索表单

用户登录

You are here

slipjs 滚动 滑动 一屏滑动 有大用 有大大用

SlipJs可以让你的手机网站像原生手机软件一样惯性滚动，手触图片轮换等等。

为什么用 SlipJs?

简单易用

追求极致的高性能

很小

兼容Android iOS

SlipJs API详细

使用Slip.js快速创建整屏滑动的手机网页

SlipJs快速使用教程

友情链接

slipjs 滚动滑动一屏滑动有大用有大大用