knokout列表控件

时间 2019-11-10

标签 knokout 列表控件繁體版

原文原文链接

Knockout列表控件

Knockout列表控件

1.功能说明

支持数据列表功能的使用，列表能够是固定长度的列表也能够是不固定长度根据加载数据的多少来展现,支持上下拉加载数据，侧滑删除，长按和行点击。javascript

列表对应的数据结构是JSON数组，例如，下面的JSON结构：css

var data = [{
'name' : '应用商店',
'descri' : '这是一段关于应用的描述,能够点击进入查看详情',
'img' : 'img/app_store.png'
}, {
'name' : '动听音乐',
'descri' : '这是一段关于应用的描述,能够点击进入查看详情',
'img' : 'img/music.png'
}];

2.HTML结构及图示

列表总体效果图以下：

列表每一行结构图示：

列表HTML结构以下：html

<div class="um-listview-wrap" id="listview">
<ul class="um-list um-no-active">
<li class="um-listview-row">
<a href="#" class="um-list-item um-swipe-action">
<div class="um-swipe-btns">
<span class="um-swipe-btn um-delete">删除</span>

</div>
<div class="um-list-item-media">

</div>
<div class="um-list-item-inner">
<div class="um-list-item-body">

</div>
<div class="um-list-item-right">
<span class="um-badge um-btn-success mr10">3</span>

</div>
</div> </a>
</li>
</ul>
</div>

3.控件初始化

var listview = UM.listview(selector, opts);

其中UM.listview方法会根据列表控件的css选择器和相关配置对象opts,构造一个新的列表对象，并返回给变量listview(可自定义名字)，以第二节所示HTML结构为例，可用如下代码初始化控件：java

var listview = UM.listview(‘#listview’, {});

opts配置对象支持属性以下(除非特殊说明，通常状况下配置对象属性的属性值不带单位)：jquery

配置对象属性	描述	默认值
height	设置列表控件高度(数字，单位为px)	高度默认占满父盒子
width	设置列表控件宽度(数字，单位为px)。	宽度默认占满父盒子
pullDistance	设定列表上下拉动多少px距离后触发上下拉事件(pullUp,pullDown)	默认为30px
tapHoldTime	设定手指在列表上长按多少毫秒后触发长按事件(tapHold)	默认为500ms

4.控件方法

为了阐述方便，下面的listview变量都表示通过UM.listview方法初始化以后的列表实例对象。json

4.1 监听方法

控件方法	描述	特殊说明
itemClick	手指在列表行上点击时触发，并执行回调
itemDelete	手指在列表行上点击删除按钮时触发，并执行回调	只有当列表行HTML结构内删除按钮(带有.um-delete类)存在，且被点击时才生效;一般与工具方法removeItem一块儿使用
itemSwipeLeft	手指在列表行上左滑时触发，并执行回调
itemSwipeRight	手指在列表行上右滑时触发，并执行回调
pullUp	上拉列表一段距离后触发，并执行回调	一般与工具方法refresh一块儿使用
pullDown	下拉列表一段距离后触发，并执行回调	一般与工具方法refresh一块儿使用
tapHold	手指在列表上长按一段时间后触发，并执行回调
on	监听以上事件类型，并触发回调	*

4.1.1 itemclick(行点击)api

调用示例：数组

listview.itemClick(function(sender, args){});
//等效于如下代码
listview.on(‘itemClick’,function(sender,args){});

参数说明：sender指代listview实例对象，args对象具备rowIndex（行索引）和$target（目标行DOM的jquery对象）markdown

4.1.2 itemDelete(行删除）数据结构

调用示例：

listview.itemDelete(function(sender, args){});
//等效于如下代码
listview.on(‘itemDelete’,function(sender,args){});

参数说明：sender指代listview实例对象，args对象具备rowIndex（行索引）和$target（目标行DOM的jquery对象）

4.1.3 itemSwipeLeft(行左滑)

调用示例：

listview.itemSwipeLeft(function(sender, args){});
//等效于如下代码
listview.on(‘itemSwipeLeft’,function(sender,args){});

参数说明：sender指代listview实例对象，args对象具备rowIndex（行索引）和$target（目标行DOM的jquery对象）

4.1.4 itemSwipeRight(行右滑)

调用示例：

listview.itemSwipeRight(function(sender, args){});
//等效于如下代码
listview.on(‘itemSwipeRight’,function(sender,args){});

参数说明：sender指代listview实例对象，args对象具备rowIndex（行索引）和$target（目标行DOM的jquery对象）

4.1.5 pullUp(上拉列表)

调用示例：

listview.pullUp(function(sender){});
//等效于如下代码
listview.on(‘pullUp’,function(sender){});

参数说明：sender指代listview实例对象

4.1.6 pullDown(下拉列表)

调用示例：

listview.pullDown(function(sender){});
//等效于如下代码
listview.on(‘pullDown’,function(sender){});

4.1.7 tapHold(长按列表)

调用示例：

listview.tapHold(function(sender){});
//等效于如下代码
listview.on(‘tapHold’,function(sender){});

4.1.8 on(监听列表事件)

调用示例：

listview.on(‘itemClick’,function(sender,args){}); //监听行点击
listview.on(‘tapHold’,function(sender){}); //监听列表长按

参数说明：sender指代listview实例对象

4.2 工具方法

控件方法	描述	特殊说明
showItemMenu	滑动显示列表行菜单	只有当列表行HTML结构内存在图2.3所标识的区域4，此方法才有意义
hideItemMenu	滑动隐藏列表行菜单	只有当列表行HTML结构内存在图2.3所标识的区域4，此方法才有意义
refresh	更新列表，并隐藏上下拉列表时的加载条	一般在pullUp与pullDown方法回调函数里面使用

4.2.1 showItemMenu(显示列表行菜单）

调用示例：

listview.showMenuItem($elem);

参数说明：请注意上面红色字体标注部分， $elem表示目标行DOM结构的jquery化后的对象

该方法一般与itemSwipeLeft方法一块儿使用,以下所示：

listview.itemSwipeLeft(function(sender, args){
sender.showMenuItem(args.$target);
});

4.2.2 hideMenuItem(隐藏列表行菜单)

调用示例：

listview.hideMenuItem($elem);

参数说明：请注意上面红色字体标注部分， $elem表示目标行DOM结构的jquery化后的对象

该方法一般与itemSwipeRight方法一块儿使用,以下所示：

listview.itemSwipeRight(function(sender, args){
sender.hideMenuItem(args.$target);
});

4.2.3 refresh(上下拉以后更新列表)

调用示例：

listview.refresh();

该方法一般与pullUp或者pullDown方法一块儿使用,以下所示：

listview.pullUp(function(sender){
//这里书写本身的代码
sender.refresh();
});
listview.pullDown(function(sender){
//这里书写本身的代码
sender.refresh();
});

5.一个完整示例

如下是一个完整的实例，ＤＯＭ结构使用KnockoutJS渲染，结构与本文第2节有差别的地方，就是多了几个绑定字段。假设json结构以下：

var data = [{
'name' : '应用商店',
'descri' : '这是一段关于应用的描述,能够点击进入查看详情',
'img' : 'img/app_store.png'
}, {
'name' : '动听音乐',
'descri' : '这是一段关于应用的描述,能够点击进入查看详情',
'img' : 'img/music.png'
}];

这是最终效果：

5.1 DOM结构

<div class="um-listview-wrap" id="listview">
<ul class="um-form um-no-active" data-bind="foreach:data">
<li class="um-listview-row">
<a href="#" class="um-list-item um-swipe-action">
<div class="um-swipe-btns">
<span class="um-swipe-btn">自定义</span>
<span class="um-swipe-btn um-delete">删除</span>
</div>
<div class="um-list-item-media">
<img alt="" width=50 data-bind="attr:{src: img}">
</div>
<div class="um-list-item-inner">
<div class="um-list-item-body">
<h4 data-bind="text:name" class="f16"></h4>
<p data-bind="text:descri" class="f14 um-text-overflow"></p>
</div>
<div class="um-list-item-right">
<span class="um-badge um-btn-success mr10">3</span>
</div>
</div> </a>
</li>
</ul>
</div>

5.2 Knockout加载数据

var ViewModel = function(data) {
var self = this;
self.data = ko.observableArray(data);
};
var viewModel = new ViewModel(data);
ko.applyBindings(viewModel);

注：data为第5.1节所示数据对象。

5.3 列表控件初始化

var listview = UM.listview('#listview'，{
//此处可对照本文第3节设置配置对象属性
});

5.4 添加控件方法

listview.on('pullDown', function(sender) {
viewModel.data.unshift({
'name' : '新增应用',
'descri' : '这是一段关于应用的描述,能够点击进入查看详情',
'img' : 'img/app_default1.png'
});
sender.refresh();
}).on('pullUp', function(sender) {
viewModel.data.push({
'name' : '新增应用',
'descri' : '这是一段关于应用的描述,能够点击进入查看详情',
'img' : 'img/app_default2.png'
});
sender.refresh();
}).on('itemDelete', function(sender, args) {
args.$target.slideUp(500, function() {
});
}).on('itemClick', function(sender, args) {
//console.log(args);
}).on('itemSwipeLeft', function(sender, args) {
sender.showItemMenu(args.$target);
}).on('itemSwipeRight', function(sender, args) {
sender.hideItemMenu(args.$target);
}).on('tapHold', function() {
//console.log('yes');
});

至此一个完整的示例就实现了