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