BUI

其它版本:

API for BUI 1.5.1

Show:

bui.pullrefresh Class

下拉刷新控件

可以自由定义下拉事件

预览地址: demo

方法说明:

reverse: 还原位置,下拉请求完数据以后,需要还原位置
fail: 请求失败以后,可以变为点击加载
refresh: 手动刷新数据
option: 获取设置参数
widget: 获取依赖控件
内容交互
lock: 锁住滑动,一般用于控件冲突
unlock: 解锁滑动,一般用于控件冲突
setHeight: 设置内容滚动高度
控件预览

Constructor

bui.pullrefresh

(
  • [option]
)

Parameters:

  • [option] Object optional
    • id String

      [ 控件的ID,需要满足固定的结构 ]

    • autoLoad Boolean

      [ 是否第一次先执行加载 true | false ]

    • lastUpdated Boolean

      [ 是否显示更新的时间提醒 ]

    • distance Number

      [ 默认90,下拉的距离超过才会触发事件 ]

    • maxDistance Number

      [ 1.4.2新增 默认0,下拉的距离超过最大值自动触发事件并返回 ]

    • stopHandle String

      [ 1.4.2新增,样式名,默认为空,支持多个样式名,以逗号间隔. 当这个值等于下拉刷新里面的某个样式,不触发下拉刷新,一般用于事件冲突,比方 input[type=range] 无法滑动的时候 ]

    • onRefresh Function

      [ 上拉以后执行 ]

    • [onBeforeInit] Function optional

      [ 1.5.1新增 初始化前触发 ]

    • [onInited] Function optional

      [ 1.5.1新增 初始化以后触发 ]

    • refreshTips Object
      • start String
        [ 开始加载的文本提醒 ]
      • release String
        [ 下拉的文本提醒 ]
      • end String
        [ 下拉高度不足提醒 ]
      • fail String
        [ 下拉加载失败提醒 ]
      • success String
        [ 成功提醒 ]

Example:

 html:

        <div id="scroll" class="bui-scroll">
            <div class="bui-scroll-head"></div>
            <div class="bui-scroll-main">
                <ul class="bui-list">
                    <li class="bui-btn">这里是循环的内容</li>
                </ul> 
            </div>
            <div class="bui-scroll-foot"></div>
        </div>

 js: 

        // 初始化
        var uiPullRefresh = bui.pullrefresh({
            id: "#scroll",
            onRefresh: getData
        })

        //数据请求示例
        var start = 1;
        var pagesize = 4;
        function getData (start,pagesize) {
            var _self = this;
            bui.ajax({
                url: "http://localhost/mysite/yumeng/index.php/API/Usercenter/getUserList",
                data: {
                    pageindex:start,
                    pagesize:pagesize
                }
            }).done(function(res) {

                console.log(res);

                //请求成功以后还原位置
                uiPullRefresh.reverse();

            }).fail(function (res) {
                //请求失败以后改为点击加载
                uiPullRefresh.fail();

            })
        }

Methods

destroy

(
  • [bool]
)

[销毁控件]

Parameters:

  • [bool] Boolean optional

    [ 默认: false 销毁部分 | true 销毁全部 ]

Example:

       //销毁
       uiPullRefresh.destroy();

fail

(
  • [option]
)
chainable

请求失败改为点击加载,一般在请求的fail里面

Parameters:

  • [option] Object optional

Example:

       //uiPullRefresh基于顶部例子
       uiPullRefresh.fail();

init

(
  • [option]
)
chainable

初始化方法,用于重新初始化结构,事件只初始化一次

Parameters:

  • [option] Object optional

    [参数控件本身]

lock

(
  • [callback]
)
chainable

锁住拖动刷新,跟unlock配合使用

Parameters:

  • [callback] Function optional

    回调

Example:

       //uiPullRefresh基于顶部例子
       uiPullRefresh.lock();

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

Parameters:

  • [key] String | object optional

    [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数 ]

  • [value] String | number | boolean | function optional

    [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传 ]

Example:

       //获取所有参数
        //获取所有参数
       var option = uiPullRefresh.option();

       //获取某个参数
       var id = uiPullRefresh.option( "id" );

       //修改一个参数
       uiPullRefresh.option( "lastUpdated",false );

       //修改多个参数
       uiPullRefresh.option( {"lastUpdated":false} );

refresh

() chainable

手动刷新数据

Example:

       //uiPullRefresh基于顶部例子
       uiPullRefresh.refresh();

reverse

(
  • [num]
  • [bool]
  • [callback]
)
chainable

返回原位

Parameters:

  • [num] Number optional

    数字

  • [bool] Boolean optional

    是否使用动画 true | false

  • [callback] Function optional

    回调

Example:

       //回调里面触发 uiPullRefresh基于顶部例子
       uiPullRefresh.reverse();

setHeight

(
  • [height]
)
chainable

设置滚动的高度,常用于$(window).resize(fun)

Parameters:

  • [height] Number | String optional

    设置的高度

Example:

       //uiPullRefresh基于顶部例子
       uiPullRefresh.setHeight(300);

unlock

(
  • [callback]
)
chainable

绑定拖动刷新,跟lock配合使用

Parameters:

  • [callback] Function optional

    回调

Example:

       //uiPullRefresh基于顶部例子
       uiPullRefresh.unlock();

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    [ 依赖控件名 loading ]

Example:

       //获取依赖控件
       var uiPullRefreshWidget = uiPullRefresh.widget();

Events

off

为控件取消绑定事件

Event Payload:

  • [type] String optional

    [ 事件类型: "refresh"(刷新时) | "swipedown"(往下滑) | "movingdown"(往下滑移动实时) ]

  • [callback] Function optional

    [ 绑定的事件, this 为当前点击的菜单 ]

Example:

       uiPullrefresh.off("refresh");

on

为控件绑定事件

Event Payload:

  • [type] String optional

    [ 事件类型: "refresh"(刷新时) | "swipedown"(往下滑) | "movingdown"(往下滑移动实时) ]

  • [callback] Function optional

    [ 绑定的事件, this 为当前点击的菜单 ]

Example:

       uiPullrefresh.on("refresh",function () {
           // 点击的菜单
           console.log(this);
       });