bui.listview Class
Constructor
bui.listview
(
-
option
Parameters:
-
optionObject-
idString[控件id]
-
[uid]String optional1.6.6新增，实例的自定义唯一名字，用于命令式调用
-
dataArray点击触发侧滑的按钮 例如:[{"text": "修改", "classname":"btn-blue"}]
-
[text]String optional菜单的文本 -
[classname]String optional菜单的样式
-
-
[swipe]Boolean optional1.6.6新增 默认 true(允许滑动) | false
-
[template]Function optional1.5.2新增, 默认null, 模板不满意,可以通过此方法返回新的模板,第一个参数为data的数据
-
[handle]String optional触发的区域,默认是.bui-btn
-
[width]Number optionallistview的宽度,默认:0, 0 为自适应屏幕宽度
-
[autoClose]Boolean optional1.6.6 默认 true (滑动时超出屏幕会自动关闭，用于修复手机端bug) | false
-
[height]Number optionallistview的高度,默认:0, 0 为自适应内容高度
-
[relative]Boolean optional1.6.6新增 默认 false 使用屏幕的宽度 | true 相对父级的宽度
-
[menuWidth]Number optional菜单总宽度,默认:100
-
[menuHeight]Number optional菜单的高度 默认:0 自适应内容高度
-
[position]String optional菜单侧滑的方向 right | left
-
[zoom]Boolean optionalsince 1.3.0 是否采用缩放宽高的方式 默认 false | true
-
[mask]Boolean optional遮罩 true
-
[distance]Number optional默认80, 拖拽大于distance才会生效,配合delay可以防止listview又有上下其它事件
-
[onBeforeInit]Function optional1.5.1新增 初始化前触发
-
[onInited]Function optional1.5.1新增 初始化以后触发
-
[callback]Function optional点击的回调
-
Example:
html:
// 示例结构1: 动态渲染
<ul id="listview" class="bui-listview">
<li>
<div class="bui-btn">
菜单
</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: 禁止渲染
<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>
// 第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;
}
});
Item Index
Methods
active
()
Object
获取激活对象
Returns:
Object:
[ swipe对象 ]
Example:
//是否打开
var activeUI = uiListview.active();
close
()
chainable
关闭菜单
Example:
//关闭菜单
uiListview.close();
destroy
(
-
[bool]
[销毁控件]
Parameters:
-
[bool]Boolean optional默认: false 销毁部分 | true 销毁全部
Example:
//销毁
uiListview.destroy();
index
()
Number
返回当前行索引
Returns:
Number:
[ 没有激活状态下是 -1 ]
Example:
//返回当前行索引
var index = uiListview.index();
init
(
chainable
-
[option]
初始化方法,用于重新初始化结构,事件只初始化一次
Parameters:
-
[option]Object optional参数控件本身
ispin
()
是否置顶
Example:
//置顶
var ispin = uiListview.ispin();
lock
()
chainable
不允许滑动
Example:
//关闭菜单
uiListview.lock();
option
(
chainable
-
[key] -
[value]
获取设置参数
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
()
置顶当前行，置顶会给当前行增加 bui-pin 样式，可以自行定义展示效果
Example:
//置顶
uiListview.pin();
remove
()
移除当前行
Example:
//移除当前行
uiListview.remove();
unlock
()
chainable
允许滑动
Example:
//关闭菜单
uiListview.unlock();
unpin
(
-
[bool]
取消固定
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
为控件取消绑定事件
Event Payload:
-
[type]String optional事件类型: "open" | "close"
-
[callback]Function optional绑定的事件, this 为当前点击的菜单
Example:
uiListview.off("lock");
on
为控件绑定事件
Event Payload:
-
[type]String optional事件类型: "open" | "close"
-
[callback]Function optional绑定的事件, this 为当前点击的菜单
Example:
uiListview.on("lock",function () {
// 点击的菜单
console.log(this);
});