BUI

其它版本:

API for BUI 1.6.x

Show:

bui.pullrefresh Class

Defined in: src/scripts/ui/bui.pullrefresh.js:9
Module: UI

下拉刷新控件

可以自由定义下拉事件

预览地址: demo

方法说明:

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

Constructor

bui.pullrefresh

(
  • [option]
)

Defined in src/scripts/ui/bui.pullrefresh.js:9

Parameters:

  • [option] Object optional
    • id String

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

    • autoLoad Boolean

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

    • lastUpdated Boolean

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

    • distance Number

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

    • handleMove String

      [ 1.6.3 默认 "main" || "head", 下拉的时候一起拖动的位置, 数据量较多建议选择head ]

    • maxDistance Number

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

    • stopHandle String

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

    • stopPropagation Boolean

      [ 1.5.5新增, 默认 false | true 阻止触发外部滑动 ]

    • cacheHeight Boolean

      [ 1.6.2新增, 默认 true | false 使用缓存的高度计算,false 则动态获取页面高度计算 ]

    • onRefresh Function

      [ 上拉以后执行 ]

    • [onBeforeRefresh] [ 1.5.2新增, 刷新前执行] Function optional
    • [onBeforeInit] [ 1.5.1新增 初始化前触发] Function optional
    • [onInited] [ 1.5.1新增 初始化以后触发] Function optional
    • 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] [ 默认: false 销毁部分 | true 销毁全部]
)

Defined in src/scripts/ui/bui.pullrefresh.js:905

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] [ 默认: false 销毁部分 | true 销毁全部] Boolean optional

Example:

       //销毁
                                                   uiPullRefresh.destroy();

fail

(
  • [option]
)
chainable

Defined in src/scripts/ui/bui.pullrefresh.js:789

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

Parameters:

  • [option] Object optional

Example:

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

init

(
  • [option] [参数控件本身]
)
chainable

Defined in src/scripts/ui/bui.pullrefresh.js:207

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

Parameters:

  • [option] [参数控件本身] Object optional

lock

(
  • [callback]
)
chainable

Defined in src/scripts/ui/bui.pullrefresh.js:619

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

Parameters:

  • [callback] Function optional

    回调

Example:

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

option

(
  • [key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数]
  • [value] [ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传]
)
chainable

Defined in src/scripts/ui/bui.pullrefresh.js:946

获取设置参数

Parameters:

  • [key] [ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数] String | object optional
  • [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

Defined in src/scripts/ui/bui.pullrefresh.js:810

手动刷新数据

Example:

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

resize

(
  • [option] [ 可以不传]
  • [option.width] [ 如果不传则自动计算]
  • [option.height] [ 如果不传则自动计算,一些特殊情况需要告诉它在哪个高度下自动计算]
)
chainable

Defined in src/scripts/ui/bui.pullrefresh.js:875

Available since 1.5.3

重新计算高度

Parameters:

  • [option] [ 可以不传] Object optional
  • [option.width] [ 如果不传则自动计算] Number optional
  • [option.height] [ 如果不传则自动计算,一些特殊情况需要告诉它在哪个高度下自动计算] Number optional

Example:

      //重新计算高度
                                                  uiPullRefresh.resize();

reverse

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

Defined in src/scripts/ui/bui.pullrefresh.js:677

返回原位

Parameters:

  • [num] Number optional

    数字

  • [bool] Boolean optional

    是否使用动画 true | false

  • [callback] Function optional

    回调

Example:

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

setHeight

(
  • [height]
)
chainable

Defined in src/scripts/ui/bui.pullrefresh.js:832

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

Parameters:

  • [height] Number | String optional

    设置的高度

Example:

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

unlock

(
  • [callback]
)
chainable

Defined in src/scripts/ui/bui.pullrefresh.js:649

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

Parameters:

  • [callback] Function optional

    回调

Example:

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

widget

(
  • [name] [ 依赖控件名 loading]
)

Defined in src/scripts/ui/bui.pullrefresh.js:931

获取依赖的控件

Parameters:

  • [name] [ 依赖控件名 loading] String optional

Example:

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

Events

off

Defined in src/scripts/ui/bui.pullrefresh.js:994

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] [ 事件类型: "refresh"(刷新时) | "swipedown"(往下滑) | "movingdown"(往下滑移动实时)] String optional
  • [callback] [ 绑定的事件, this 为当前点击的菜单] Function optional

Example:

       uiPullrefresh.off("refresh");

on

Defined in src/scripts/ui/bui.pullrefresh.js:974

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] [ 事件类型: "refresh"(刷新时) | "swipedown"(往下滑) | "movingdown"(往下滑移动实时)] String optional
  • [callback] [ 绑定的事件, this 为当前点击的菜单] Function optional

Example:

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