Show:

bui.listview Class

Module: UI

侧滑列表

支持动态渲染以及静态渲染, 两种的区别就在于,动态渲染初始化简单, 静态渲染灵活,支持自定义按钮样式,并且支持左右侧滑.

可以同时有左边跟右边菜单,菜单的个数也可以不一样多,留意示例的几种不同效果

预览地址: demo

方法说明:

active: 返回当前激活的对象
bui.listview/open: 打开某一个
close: 关闭所有
lock: 不允许滑动
unlock: 允许滑动
option: 获取设置参数
widget: 获取依赖控件
控件预览

Constructor

bui.listview

(
  • option
)

Parameters:

  • option Object
    • id String

      [控件id]

    • [uid] String optional

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

    • data Array

      点击触发侧滑的按钮 例如:[{"text": "修改", "classname":"btn-blue"}]

      • [text] String optional
        菜单的文本
      • [classname] String optional
        菜单的样式
    • [swipe] Boolean optional

      1.6.6新增 默认 true(允许滑动) | false

    • [template] Function optional

      1.5.2新增, 默认null, 模板不满意,可以通过此方法返回新的模板,第一个参数为data的数据

    • [handle] String optional

      触发的区域,默认是.bui-btn

    • [width] Number optional

      listview的宽度,默认:0, 0 为自适应屏幕宽度

    • [autoClose] Boolean optional

      1.6.6 默认 true (滑动时超出屏幕会自动关闭,用于修复手机端bug) | false

    • [height] Number optional

      listview的高度,默认:0, 0 为自适应内容高度

    • [relative] Boolean optional

      1.6.6新增 默认 false 使用屏幕的宽度 | true 相对父级的宽度

    • [menuWidth] Number optional

      菜单总宽度,默认:100

    • [menuHeight] Number optional

      菜单的高度 默认:0 自适应内容高度

    • [position] String optional

      菜单侧滑的方向 right | left

    • [zoom] Boolean optional

      since 1.3.0 是否采用缩放宽高的方式 默认 false | true

    • [mask] Boolean optional

      遮罩 true

    • [distance] Number optional

      默认80, 拖拽大于distance才会生效,配合delay可以防止listview又有上下其它事件

    • [onBeforeInit] Function optional

      1.5.1新增 初始化前触发

    • [onInited] Function optional

      1.5.1新增 初始化以后触发

    • [callback] Function optional

      点击的回调

Example:

html:

   // 示例结构1: 动态渲染
                                       
                                            <ul id="listview" class="bui-listview">
                                                  <li>
                                                      <div class="bui-btn">
                                                          菜单
                                                      </div>
                                                  </li>
                                              </ul>
                                       // 示例结构2: 禁止渲染
                                        
                                            <ul id="listview" class="bui-listview">
                                              <!-- 设置status属性可以避免渲染菜单 -->
                                              <li status="1">
                                                <div class="bui-btn bui-box">
                                                  <div class="span1">不渲染</div>
                                                  <i class="icon-listright"></i>
                                                </div>
                                              </li>
                                            </ul>
                                       // 示例结构3: 静态渲染,可以允许左右都有按钮, 并且在动态加载的列表的时候, 只需要初始化一次
                                           <ul id="listview" class="bui-listview">
                                              <li status="1">
                                                <div class="bui-btn bui-box" href="pages/ui_controls/bui.listview.html" param='{"id":"123"}'>
                                                  <div class="span1">静态渲染-左右菜单</div>
                                                  <span class="bui-badges">荐</span>
                                                  <i class="icon-listright"></i>
                                                </div>
                                                <div class="bui-listview-menu swipeleft" data-moving="240">
                                                    <div class="bui-btn primary">置顶</div>
                                                    <div class="bui-btn primary">修改</div>
                                                    <div class="bui-btn danger">删除</div>
                                                </div>
                                                <div class="bui-listview-menu swiperight">
                                                    <div class="bui-btn primary">修改</div>
                                                    <div class="bui-btn danger">删除</div>
                                                </div>
                                              </li>
                                            </ul>
                                    

js:

      // 第1种初始化
                                          var uiListview = bui.listview({
                                                id: "#listview",
                                                data: [{ "text": "置顶", "classname": "primary" }, { "text": "删除", "classname": "danger" }],
                                                position: "right", //默认就是右边,所以可以不用传
                                                callback: function (e) {
                                                    // this 为滑动出来的操作按钮
                                                    var $this = $(e.target);
                                                   var text = $this.text();
                                                   // bui 1.7.3 的新增做法
                                                    switch (text) {
                                                        case "删除":
                                                            bui.confirm("确定要删除吗", (e) => {
                                                                //this 是指点击的按钮
                                                                var text2 = $(e.target).text();
                                                                if (text2 == "确定") {
                                                                    // 执行删除整行操作
                                                                    this.remove();
                                                                }
                                                            })
                                                            break;
                                                        case "置顶":
                                                           $this.text("取消置顶");
                                                            this.pin();
                                                            break;
                                                        case "取消置顶":
                                                            $this.text("置顶");
                                                           this.unpin();
                                                            break;
                                                    }
                                                   // 1.7.3 以下
                                                    // if (text == '删除') {
                                                    //     this.remove()
                                                    //     bui.confirm("确定要删除吗", function (e) {
                                                    //         //this 是指点击的按钮
                                                    //         var text2 = $(e.target).text();
                                                    //         if (text2 == "确定") {
                                                    //             // 执行删除整行操作
                                                    //             $this.parents("li").fadeOut(300, function () {
                                                    //                 $(this).remove();
                                                    //             });
                                                    //         }
                                                    //     })
                                                    // }
                                                   // 不管做什么操作,先关闭按钮,不然会导致第一次点击无效.
                                                    this.close();
                                                }
                                            });
                                         
                                          // 第2种自定义模板初始化
                                          var uiListview = bui.listview({
                                                  id: "#listview",
                                                  data: [{ "text": "修改", "classname":"btn-blue"},
                                                          { "text": "删除", "classname":"btn-red"}],
                                                  callback: function (e) {
                                                    var index = $(e.target).text();
                                                        if( index == "修改" ){
                                                            //do something
                                                        }
                                                        this.close();
                                                  },
                                                  template: function(data) {
                                                      var html = '';
                                                      html += '<div class="bui-listview-menu swipeleft">';
                                                      data && data.forEach(function(el, i) {
                                                          html += '<div class="bui-btn danger">' + el.text + '</div>';
                                                      })
                                                      html += '</div>';
                                                      return html;
                                                  }
                                              });
                                    

Methods

active

() Object

Defined in src/scripts/ui/bui.listview.js:409

Available since 1.3.0

获取激活对象

Returns:

Object:

[ swipe对象 ]

Example:

      //是否打开
                                                      var activeUI = uiListview.active();
                                                

close

() chainable

Defined in src/scripts/ui/bui.listview.js:572

Available since 1.3.0

关闭菜单

Example:

       //关闭菜单
                                                       uiListview.close();
                                                

destroy

(
  • [bool]
)

Defined in src/scripts/ui/bui.listview.js:630

Available since 1.4.2

[销毁控件]

Parameters:

  • [bool] Boolean optional

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

Example:

      //销毁
                                                      uiListview.destroy();
                                                

index

() Number

Defined in src/scripts/ui/bui.listview.js:425

Available since 1.7.3

返回当前行索引

Returns:

Number:

[ 没有激活状态下是 -1 ]

Example:

      //返回当前行索引
                                                      var index = uiListview.index();
                                                

init

(
  • [option]
)
chainable

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

Parameters:

  • [option] Object optional

    参数控件本身

ispin

()

Defined in src/scripts/ui/bui.listview.js:470

Available since 1.7.3

是否置顶

Example:

      //置顶
                                                      var ispin = uiListview.ispin();
                                                

lock

() chainable

Defined in src/scripts/ui/bui.listview.js:590

Available since 1.3.0

不允许滑动

Example:

       //关闭菜单
                                                       uiListview.lock();
                                                

option

(
  • [key]
  • [value]
)
chainable

获取设置参数

Parameters:

  • [key] String | object optional

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

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

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

Example:

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

pin

()

Defined in src/scripts/ui/bui.listview.js:448

Available since 1.7.3

置顶当前行,置顶会给当前行增加 bui-pin 样式,可以自行定义展示效果

Example:

      //置顶
                                                      uiListview.pin();
                                                

remove

()

Defined in src/scripts/ui/bui.listview.js:526

Available since 1.7.3

移除当前行

Example:

      //移除当前行
                                                      uiListview.remove();
                                                

unlock

() chainable

Defined in src/scripts/ui/bui.listview.js:610

Available since 1.3.0

允许滑动

Example:

      //关闭菜单
                                                      uiListview.unlock();
                                                

unpin

(
  • [bool]
)

Defined in src/scripts/ui/bui.listview.js:489

Available since 1.7.3

取消固定

Parameters:

  • [bool] Boolean optional

    默认 false (取消置顶后放到置顶后) | true (取消置顶后放到最后)

Example:

      //取消置顶后放到置顶后
                                                      uiListview.unpin();
                                                
                                                      //取消置顶后放到最后
                                                      uiListview.unpin(true);
                                                

widget

(
  • [name]
)

获取依赖的控件

Parameters:

  • [name] String optional

    依赖控件名

Example:

       //获取依赖控件
                                                       var uiListviewWidget = uiListview.widget();
                                                

Events

off

Defined in src/scripts/ui/bui.listview.js:727

Available since 1.3.0

为控件取消绑定事件

Event Payload:

  • [type] String optional

    事件类型: "open" | "close"

  • [callback] Function optional

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

Example:

       uiListview.off("lock");
                                                

on

Defined in src/scripts/ui/bui.listview.js:707

Available since 1.3.0

为控件绑定事件

Event Payload:

  • [type] String optional

    事件类型: "open" | "close"

  • [callback] Function optional

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

Example:

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