Show:

bui.scroll Class

Module: UI

滚动控件

上拉加载,下拉刷新

可以自由定义上拉事件,下拉事件,如果无特殊要求,推荐使用 bui.list

预览地址: demo

方法说明:

refresh: 触发下拉的方法
reverse: 还原位置,下拉请求完数据以后,需要还原位置
load: 触发加载某一页数据
nextPage: 触发加载下一页数据
prevPage: 触发加载上一页数据
filter: 过滤数据
fail: 请求失败以后,可以变为点击加载
updatePage: 更新分页及缓存
bui.scroll/isRefresh: 获取当前是刷新状态还是加载
内容交互方法
lock: 不允许滚动加载
unlock: 允许滚动加载
setHeight: 设置内容滚动高度
to: 滚动条跳转到第几个元素
toBottom: 跳到底部
scrollTop: 滚动多少px
公共方法
option: 获取设置参数
widget: 获取依赖控件
控件预览

Constructor

bui.scroll

(
  • [option]
)

Parameters:

  • [option] Object optional
    • id String

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

    • [uid] String optional

      1.6.6新增,实例的自定义唯一名字,用于命令式调用

    • [children] String optional

      列表的样式不能为空, 找到要循环遍历的元素的父层 例如 .bui-list

    • [handle] String optional

      默认li, 找到要循环遍历的元素

    • [lastUpdated] Bollean optional

      下拉的文本提醒是否显示时间

    • [distance] Number optional

      默认100,下拉的距离大于这个数才会触发

    • [backDistance] Number optional

      默认50,下拉回去的距离 1.8.0新增

    • [maxDistance] Number optional

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

    • stopHandle String

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

    • [height] Number optional

      列表的高度,默认适应,如果高度不对,自行计算后传给列表即可。

    • [page] Number optional

      请求的页数,默认为1

    • [pageSize] Number optional

      每页的大小,默认为10

    • [autoRefresh] Boolean optional

      默认false 自动刷新

    • [autoNext] Boolean optional

      默认true 当高度不足时,会继续请求下一页,直到高度出现滚动条

    • [cacheHeight] Boolean optional

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

    • [refresh] Boolean optional

      允许下拉刷新, 默认true | false

    • [handleMove] String optional

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

    • [direction] String optional

      1.5.6新增 滚动的方向,默认 y || x ;

    • [refreshPage] String optional

      1.5.6新增 刷新的时候是否把分页page重置为1;

    • [loading] Object optional

      1.8.0 loading的配置

    • [scroll] Boolean optional

      1.5.6新增 默认true(绑定滚动事件) | false

    • [autoScroll] Boolean optional

      默认true 滚动到底部触发, false 自己监听

    • [onBeforeRefresh] Function optional

      1.5.2新增, 刷新前执行

    • [onBeforeLoad] Function optional

      1.5.2新增, 加载前执行

    • [onRefresh] Function optional

      下拉以后执行

    • [onLoad] Function optional

      滚动加载后执行回调,在数据渲染后

    • [delayTime] Number optional

      默认 100,滚动结束后才触发onScrolling 0 则实时触发onScrolling

    • [onScrolling] Function optional

      滚动时触发

    • [onBeforeInit] Function optional

      1.5.1新增 初始化前触发

    • [onInited] Function optional

      1.5.1新增 初始化以后触发

    • [refreshTips] Object optional
      • [start] String optional
        开始加载的文本提醒,"刷新中.."
      • [release] String optional
        下拉的文本提醒,"松开刷新"
      • [end] String optional
        下拉高度不足提醒,"下拉刷新"
      • [fail] String optional
        下拉加载失败提醒,"点击加载"
      • [success] String optional
        成功提醒,"刷新成功"
    • [scrollTips] Object optional
      • [start] String optional
        开始加载的文本提醒,"努力加载中.."
      • [end] String optional
        上拉加载的提醒,"上拉加载更多"
      • [fail] String optional
        上拉加载失败提醒,"点击重新加载"
      • [last] String optional
        最后一页的提醒,"没有更多内容"
      • [nodata] String optional
        没有数据的提醒,"没有更多内容"

Example:

html:
                                    
                                           <div id="scroll" class="bui-scroll">
                                               <div class="bui-scroll-head"></div>
                                               <div class="bui-scroll-main">
                                                   <ul id="scrollList" class="bui-list">
                                                       <li class="bui-btn">这里是循环的内容</li>
                                                   </ul>
                                               </div>
                                               <div class="bui-scroll-foot"></div>
                                           </div>
                                    
                                    js:
                                    
                                           // 初始化
                                           var uiScroll = bui.scroll({
                                               id: "#scroll",
                                               children: ".bui-list",
                                               page:1,
                                               pageSize:10,
                                               onRefresh: refresh,
                                               onLoad: getData
                                           })
                                    
                                           //刷新数据
                                           function refresh () {
                                    
                                               page = 1;
                                               pagesize = 10;
                                               //请求数据
                                               getData(page,pagesize,"html");
                                           }
                                    
                                           //滚动加载下一页
                                           function getData (page,pagesize,command) {
                                               command = command || "append";
                                    
                                               bui.ajax({
                                                   url: "http://localhost/mysite/yumeng/index.php/API/Usercenter/getUserList",
                                                   data: {
                                                       pageindex:page,
                                                       pagesize:pagesize
                                                   }
                                               }).done(function(res) {
                                    
                                                   var data = JSON.parse(res);//有可能需要转换,视接口而定
                                    
                                                   //生成html
                                                   var html = "";
                                                   //数据渲染
                                    
                                                   //渲染数据
                                                   $("#scrollList")[command](html);
                                    
                                                   //更新分页信息
                                                   uiScroll.updatePage(start,res.data);
                                                   //还原位置
                                                   uiScroll.reverse();
                                    
                                               }).fail(function (res) {
                                    
                                                   // 可以点击重新加载
                                                   uiScroll.fail(start,pagesize,res);
                                               })
                                           }
                                    

Methods

destroy

(
  • [bool]
)

Defined in src/scripts/ui/bui.scroll.js:1143

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

       //销毁
                                                       uiScroll.destroy();
                                                

disable

()

Defined in src/scripts/ui/bui.scroll.js:1172

Available since 1.8.6

禁止滚动

Example:

enable

()

Defined in src/scripts/ui/bui.scroll.js:1185

Available since 1.8.6

允许滚动

Example:

fail

(
  • [start]
  • [count]
)
chainable

失败点击可以重新加载当前页

Parameters:

  • [start] Number optional

    第几页

  • [count] Number optional

    每页多少条

Example:

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

filter

(
  • keyword
  • key
)
Array

数据过滤,用于已有缓存过滤

Parameters:

  • keyword String

    关键字

  • key String

    在哪个字段

Returns:

Array:

[返回符合条件的数据]

Example:

       //过滤数据中的phone字段,是否含有139224这个数据
                                                       var filterData = uiScroll.filter("139224","phone");
                                                

getPage

() chainable

Defined in src/scripts/ui/bui.scroll.js:578

Available since 1.5.3

获取当前在第几页

Returns:

[object] 返回 page

Example:

       // 获取当前在第几页
                                                       var currentPage = uiScroll.getPage();
                                                

init

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    参数控件本身

last

()

Defined in src/scripts/ui/bui.scroll.js:1198

Available since 1.8.6

手动处理最后一页

Example:

load

() chainable

手动加载更多数据

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.load();
                                                

lock

() chainable

不允许滚动加载

Example:

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

lockrefresh

() chainable

Defined in src/scripts/ui/bui.scroll.js:962

Available since 1.6.3

不允许下拉刷新

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.lockrefresh();
                                                

nextPage

() chainable

加载下一页数据

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.nextPage();
                                                

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

Parameters:

  • [key] String | object optional

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

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

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

Example:

       //获取所有参数
                                                        //获取所有参数
                                                       var option = uiScroll.option();
                                                
                                                       //获取某个参数
                                                       var id = uiScroll.option( "id" );
                                                
                                                       //修改一个参数
                                                       uiScroll.option( "distance",100 );
                                                
                                                       //修改多个参数
                                                       uiScroll.option( {"distance":100} );
                                                

prevPage

() chainable

加载上一页数据

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.prevPage();
                                                

refresh

() chainable

手动执行刷新数据

Example:

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

reload

() chainable

Defined in src/scripts/ui/bui.scroll.js:1037

Available since 1.7.6

刷新数据无动画

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.reload();
                                                

resize

(
  • [option]
)
chainable

Defined in src/scripts/ui/bui.scroll.js:1108

Available since 1.5.3

重新计算高度

Parameters:

  • [option] Object optional

    可以不传

    • [width] Number optional

      如果不传则自动计算

    • [height] Number optional

      如果不传则自动计算,一些特殊情况需要告诉它在哪个高度下自动计算

Example:

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

reverse

(
  • [callback]
)
chainable

返回原位

Parameters:

  • [callback] Function optional

    回调

Example:

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

scrollTop

(
  • [num]
)
chainable

Defined in src/scripts/ui/bui.scroll.js:868

Available since 1.4.3

跳到指定的滚动高度值

Parameters:

  • [num] Number | Object optional

    非必须,默认:0

Example:

       uiScroll.scrollTop(2);
                                                

setHeight

(
  • [height]
)
chainable

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

Parameters:

  • [height] Number | String optional

    设置的高度

Example:

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

status

() chainable

Defined in src/scripts/ui/bui.scroll.js:921

Available since 1.8.0

修改status属性

Example:

       uiScroll.status("start");
                                                

to

(
  • index
  • callback
)
chainable

跳到指定元素

Parameters:

  • index Number

    内容的索引,例如第3个li 则 index=2

  • callback Function

    跳转后执行

Example:

       uiScroll.to(2);
                                                

toBottom

(
  • callback
)
chainable

跳到底部

Parameters:

  • callback Function

    跳转后执行

Example:

       uiScroll.toBottom();
                                                

unlock

() chainable

允许滚动加载

Example:

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

unlockrefresh

() chainable

Defined in src/scripts/ui/bui.scroll.js:980

Available since 1.6.3

不允许下拉刷新

Example:

       //uiScroll基于顶部例子
                                                       uiScroll.unlockrefresh();
                                                

updatePage

(
  • start
  • data
)
chainable

更新请求的分页及缓存,并继续请求下一页, 旧接口updateCache不再使用.

Parameters:

  • start String

    [当前分页]

  • data Object

    [当前数据]

Example:

       //回调里面触发 uiScroll基于顶部例子
                                                       uiScroll.updatePage(2,data);
                                                

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名 pullrefresh loading

Example:

       //获取依赖控件
                                                       var uiScrollWidget = uiScroll.widget();
                                                

Events

off

Defined in src/scripts/ui/bui.scroll.js:1283

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] String optional

    事件类型: "loadpage"(数据加载后) | "lastpage"(加载最后一页时触发) | "scrollend"(每次滚动结束) | "scrolltop"(滚动到顶部) |"scrollbottom"(滚动到底部)

  • [callback] Function optional

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

Example:

       uiScroll.off("scrollend");
                                                

on

Defined in src/scripts/ui/bui.scroll.js:1263

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] String optional

    事件类型: "loadpage"(数据加载后) | "lastpage"(加载最后一页时触发) | "scrollend"(每次滚动结束) | "scrolltop"(滚动到顶部) |"scrollbottom"(滚动到底部)

  • [callback] Function optional

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

Example:

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