PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > JavaScript教程 > 正文

    SlipJs详细API说明

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:SlipJs 能做什么?SlipJs可以让你的手机网站像原生手机软件一样惯性滚动,手触图片轮换等等。refresh(core_width, width):当在滚动对象...
    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(); // 下一张
    }
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-69-1297-1.html
    相关热词搜索: SlipJs