uexNBListView查看3.0文档

• 1、简介
• 2、API概览
• 3、更新历史
• 4、附录
• 5、技术专题

接入指引部分：

• 自定义布局指引文档
• 案例文档
• 数据载入方式
• 注意事项

  1、简介

自定义布局列表插件

1.1、说明

该插件封装了自定义布局的功能,开发者可通过该插件实现原生布局.

1.2、UI展示

1.3、开源源码

插件测试用例与源码下载:点击插件中心至插件详情页 (插件测试用例与插件源码已经提供)

1.4、平台版本支持

本插件的所有API默认支持Android4.0+和iOS7.0+操作系统. 有特殊版本要求的API会在文档中额外说明.

1.5、接口有效性

本插件所有API默认在插件版本4.0.0+可用. 在后续版本中新添加的接口会在文档中额外说明.

2、API概览

2.1、方法

initLayout //初始化布局

uexNBListView.initLayout(params, callbackFunction);

说明:

初始化布局,动态数据定义方式,请参考数据载入方式,该方法需要在所有方法之前调用.

参数:

var params ={
    listViewId:,
    layout:{
        center:[],
        left:[],
        right:[]
    }
}

各字段含义如下:

回调参数:

var callbackFunction = function(error){}

示例:

var params = {
     listViewId:"0",
     layout:{
         center:["res://case1/layout_item1.xml","res://case1/layout_item2.xml"],
         left:["res://case1/layout_left.xml"],
         right:["res://case1/layout_right.xml"]
     }
};
var data = JSON.stringify(params);
uexNBListView.initLayout(data, function(error){
    alert(error);
});

setItems //设置列表数据

uexNBListView.setItems(params, callbackFunction);

说明:

设置列表数据,也可以刷新列表数据.原列表数据会被清空.该方法需要在initLayout方法之后调用.

参数:

var params ={
    listViewId:,
    dataList:[//列表数据
        {
            center:{},
            left:{},
            right:{}
        }
    ]
}

各字段含义如下:

回调参数

var callbackFunction = function(error){}

示例:

layout_item1布局代码:

<?xml version="1.0" encoding="utf-8"?>
<root layoutId = "1" layoutType = "${type1}">
    <linearlayout width = "-1" height = "250" background = "#ffffff"
                  gravity = "centerY">
        <linearlayout orientation = "horizontal" width = "-1"
                      height = "-2">
            <linearlayout orientation = "vertical" width = "-1"
                          height = "-1" weight = "1"  gravity = "centerX">
                <img width = "-2" height = "-2" src = "${img1}"
                     onClick = "onListViewItemClick" id = "img1"/>
                <text id = "txt1" width = "-2" height = "-2" text="${text1}" textSize = "${text1-size}"
                      margin = "0 5" textColor = "${text1-color}"/>
            </linearlayout>
            <linearlayout orientation = "vertical" width = "-1"
                          height = "-1" weight = "1" gravity = "centerX">
                <img width = "-2" height = "-2" src = "res://case1/005.png"
                     onClick = "onListViewItemClick" id = "img2"/>
                <text id = "txt2" width = "-2" height = "-2" text="${text2}" textSize = "13" visible = "${visible2}"
                      margin = "0 5" textColor = "#000000"/>
            </linearlayout>
            <linearlayout orientation = "vertical" width = "-1"
                          height = "-1" weight = "1"  gravity = "centerX">
                <img width = "-2" height = "-2" src = "res://case1/006.png"
                     onClick = "onListViewItemClick" id = "img3"/>
                <text id = "txt3" width = "-2" height = "-2" text="${text3}" textSize = "13"
                      margin = "0 5" textColor = "#000000"/>
            </linearlayout>
            <linearlayout orientation = "vertical" width = "-1"
                          height = "-1" weight = "1"  gravity = "centerX">
                <button width = "-2" height = "-2" background = "${button-bg}"
                        text="${button-text}" textSize = "${button-textSize}"
                        textColor = "${button-textColor}"
                     onClick = "onListViewItemClick" id = "img4"/>
                <text id = "txt4" width = "-2" height = "-2" text="${text4}" textSize = "13"
                      margin = "0 5" textColor = "#000000"/>
            </linearlayout>
        </linearlayout>
    </linearlayout>
</root>

layout_item2布局代码:

<?xml version="1.0" encoding="utf-8"?>
<root layoutId = "2">
    <linearlayout id = "content" orientation = "horizontal" width = "-1"
                  height = "400" background="${content_bg}">
        <linearlayout id = "linearlayout2-1" width = "-1" height = "-1" weight = "1"  gravity = "bottom"
                      background="${left_pic}" margin = "20"
                      onClick = "onListViewItemClick">
            <linearlayout orientation = "horizontal" width = "-1"
                          height = "-2"  background = "#66000000"
                          gravity="centerX">
                <text id = "txt2-1" width = "-2" height = "-2" text="东圣九州国际大饭店" textSize = "14"
                      margin = "0 0" textColor = "#ffffff"/>
            </linearlayout>
        </linearlayout>
        <linearlayout id = "linearlayout2-2" width = "-1" height = "-1" weight = "1"  gravity = "bottom"
                      background="res://case1/BaDongQian.jpg" margin = "20"
                      onClick = "onListViewItemClick">
            <linearlayout orientation = "horizontal" width = "-1"
                          height = "-2"  background = "#66000000"
                          gravity="centerX">
                <text id = "txt2-2" width = "-2" height = "-2" text="大面山" textSize = "14"
                      margin = "0 0" textColor = "#ffffff"/>
            </linearlayout>
        </linearlayout>
    </linearlayout>
</root>

layout_left布局代码:

<?xml version="1.0" encoding="utf-8"?>
<root layoutId = "left">
    <linearlayout id = "content" orientation = "horizontal" width = "300" height = "-2">
        <button id = "txt" width = "-1" height = "-1" text="${left-button}" textSize = "14"
              onClick = "onLeftClick" textColor = "#ffffff"/>
    </linearlayout>
</root>

layout_right布局代码:

<?xml version="1.0" encoding="utf-8"?>
<root layoutId = "right">
    <linearlayout id = "content" orientation = "horizontal" width = "400" height = "-2">
        <button id = "txt" width = "-1" height = "-1" text="${right-button}" textSize = "14"
              onClick = "onRightClick" textColor = "#ffffff"/>
    </linearlayout>
</root>

setItems接口数据传入方式:

var params = {
     listViewId:"0",
     dataList:[
         {
         center:{
             "type1":"1",//指定布局id,这里对应initLayout接口的layout_item1布局,该布局文件定义了layoutType的属性值为${type1},则需要在这里通过type1关键字指定布局id.值1和layout_item1布局文件中的layoutId属性值一致.
             //以下键值对中键是与layout_item1布局文件中定义的变量值(形如:${变量值})对应,值即是相对应的属性值.
             "text1" : "测试1",
             "text2" : "测试2",
             "text3" : "测试3",
             "text4" : "测试4",
             "img1":"res://case1/006.png",
             "text1-color":"#ff0000",
             "text1-size":15,
             "visible2":0,
             "button-text":"btn1",
             "button-textSize":20,
             "button-textColor":"#00ff00",
             "button-bg":"#dddddd"
         },
          left:{
                 "layoutId" : "left",//指定布局id,这里对应initLayout接口的layout_left布局,该布局文件没有定义layoutType属性,则需要在这里通过layoutId关键字指定布局id.值left和layout_left布局文件中的layoutId属性值一致.
                 "left-button" : "left1"
         },
         right:{
             "layoutId" : "right",//指定布局id,这里对应initLayout接口的layout_right布局,该布局文件没有定义layoutType属性,则需要在这里通过layoutId关键字指定布局id.值right和layout_right布局文件中的layoutId属性值一致.
             "right-button" : "right1"
         }
     },
         {
         center:{
             "layoutId":"2",
             "content_bg":"#ff0000",
             "left_pic":"res://case1/BaDongQian.jpg"
         },
         left:{
             "layoutId" : "left",
             "left-button" : "left3"
         },
         right:{
             "layoutId" : "right",
             "right-button" : "right3"
         }
     }
    ]
};
var data = JSON.stringify(params);
uexNBListView.setItems(data, function(error){
    alert(error);
});

open //打开自定义布局列表

uexNBListView.open(params, callbackFunction);

说明:

打开自定义布局列表,该方法需要在initLayout方法之后调用,若在调用该方法之前,设置了数据,则会直接显示列表内容,否则不显示.

参数:

var params ={
    listViewId:,
    left:,
    top:,
    width:,
    height:,
    swipeMode:,
    offsetLeft:,
    offsetRight:,
    refreshMode:,
    refreshTimeout:,
    openType:,
    containerID:,
    containerIndex:,
    backgroundColor:,
    header:{
        url:
    },
    footer:{
        url:
    }
}

各字段含义如下:

回调参数

var callbackFunction = function(error){}

示例:

var params = {
     listViewId:"0",
     left: 0,
     top: 0,
     width:800,
     height:800,
     offsetLeft:400,//建议为右侧布局的宽度,这里为layout_right布局文件的宽度
     offsetRight:300,//建议为左侧布局的宽度,这里为layout_left布局文件的宽度
     swipeMode:3,
     refreshMode:0
 };
 var data = JSON.stringify(params);
 uexNBListView.open(data, function(error){
    alert(error);
});

close //关闭自定义布局列表

uexNBListView.close(params);

说明:

关闭自定义布局列表

参数:

var params = []//唯一标识符数组

示例:

        var params = [0];
        var data = JSON.stringify(params);
        uexNBListView.close(data);

insert

uexNBListView.insert(params,callbackFunction);

说明:

根据索引插入一条或连续的多条数据,若索引大于或等于当前列表长度,则直接插入到列表末尾.注意dataList数据结构需要和setItems中的dataList数据结构保持一致.

参数:

var params ={
    listViewId:,
    index:,
    dataList:[
        {
            center:{},
            left:{},
            right:{}
        }
    ]
}

各字段含义如下:

回调参数:

var callbackFunction = function(error){}

示例:

var params = {
    listViewId:"0",
    index:1,
    dataList:[
         {
             center:{
             "type1":"1",
             "text1" : "add1",
             "text2" : "add2",
             "text3" : "add3",
             "text4" : "add4",
             "img1":"res://case1/006.png",
             "text1-color":"#000000",
             "text1-size":15,
             "visible2":0,
             "button-text":"btn1",
             "button-textSize":12,
             "button-textColor":"#00ff00",
             "button-bg":"res://case1/005.png"
              },
             left:{
                "layoutId" : "left",
                 "left-button" : "addleft1"
             },
             right:{
                 "layoutId" : "right",
                 "right-button" : "addright1"
             }
         },
         {
             center:{
                 "layoutId":"2",
                 "content_bg":"#00ff00",
                 "left_pic":"res://case1/BaDongQian.jpg"
             },
             left:{
                 "layoutId" : "left",
                 "left-button" : "addleft2"
             },
             right:{
                 "layoutId" : "right",
                 "right-button" : "addright2"
             }
         }
     ]
 };
 var data = JSON.stringify(params);
 uexNBListView.insert(data, function(error){
    alert(error);
});

update //根据索引更新数据

uexNBListView.update(params,callbackFunction);

说明:

根据索引更新数据.

参数:

var params ={
    listViewId:,
    index:,
    data:{
            center:{},
            left:{},
            right:{}
    }
}

各字段含义如下:

回调参数:

var callbackFunction = function(error){}

示例:

var params = {
    listViewId:"0",
    index:0,
    data:{
        center:{
            "text1":"更新我" + index
            }
        }
    };
var data = JSON.stringify(params);
uexNBListView.update(data, function(error){
    alert(error);
});

delete //根据唯一标识符和索引删除数据

uexNBListView.delete(params,callbackFunction);

说明:

根据唯一标识符和索引删除数据.

参数:

var params ={
    listViewId:,//(必选) 唯一标识符
    indexes:[]//(必选) 索引数组
}

各字段含义如下:

回调参数:

var callbackFunction = function(error){}

示例:

var params = {
    listViewId:"0",
    indexes:[0,1]
};
var data = JSON.stringify(params);
uexNBListView.delete(data, function(error){
    alert(error);
});

show //根据唯一标识符显示自定义列表

uexNBListView.show(params);

说明:

根据唯一标识符显示自定义列表.

参数:

var params ={
    listViewId://(必选) 唯一标识符
}

示例:

var params = {
    listViewId:"0"
};
var data = JSON.stringify(params);
uexNBListView.show(data);

hide //根据唯一标识符隐藏自定义列表

uexNBListView.hide(params);

说明:

根据唯一标识符隐藏自定义列表.

参数:

var params ={
    listViewId://(必选) 唯一标识符
}

示例:

var params = {
    listViewId:"0"
};
var data = JSON.stringify(params);
uexNBListView.hide(data);

setRefreshStatusCompleted //在用户执行上拉或者下拉操作后可通过该方法设置刷新完成状态

uexNBListView.setRefreshStatusCompleted(params);

说明:

在用户执行上拉或者下拉操作后可通过该方法设置刷新完成状态.若当前用户没有执行上拉或下拉操作,则调用该方法无效.

参数:

var params = {
    listViewId://(必选) 唯一标识符
}

示例:

var params = {
    listViewId:"0"
};
var data = JSON.stringify(params);
uexNBListView.setRefreshStatusCompleted(data);

sendHtmlEvent //实现头部网页或者底部网页和主网页(打开listView的网页)之间的交互

uexNBListView.sendHtmlEvent(data);

说明:

该方法只能在头部或者底部html内调用,其他网页内调用该方法无效.该方法主要实现头部网页或者底部网页和主网页(打开listView的网页)之间的交互.调用该方法传递任意字符型参数,该参数会原样通过监听方法onHtmlEvent传递给主网页.

参数:

示例:

uexNBListView.sendHtmlEvent(data);

2.2、监听方法

onPullRefreshHeader //下拉刷新的监听方法

uexNBListView.onPullRefreshHeader(params);

说明 下拉刷新的监听方法

参数:

var params ={
    status:
}

字段含义如下:

示例:

uexNBListView.onPullRefreshHeader = function(data){
    //alert("onPullRefreshHeader->" + data);
}

onPullRefreshFooter //上拉刷新的监听方法

uexNBListView.onPullRefreshFooter(params);

说明

上拉刷新的监听方法

参数:

var params ={
    status:
}

字段含义如下:

示例:

uexNBListView.onPullRefreshFooter = function(data){
    //alert("onPullRefreshFooter->" + data);
}

XXX //XXX表示名称,开发者可自定义

uexNBListView.XXX(params);

说明:

XXX表示名称,开发者可自定义.给在布局中的元素设置onClick属性值,在该元素被点击时该监听方法被触发.

参数:

var params ={
    listViewId:,
    index:,
    id:
}

字段含义如下:

示例:

在布局文件中设置元素及其onClick属性,如下:

<?xml version="1.0" encoding="utf-8"?>
<root layoutId = "left">
    <linearlayout id = "content" orientation = "horizontal" width = "300" height = "-2">
        <button id = "txt" width = "-1" height = "-1" text="${left-button}" textSize = "14" onClick = "onLeftClick" textColor = "#ffffff"/>
    </linearlayout>
</root>

则需要在调用open的网页的uexOnload方法中添加如下注册:

uexNBListView.onLeftClick = function(data){
    alert("onLeftClick->" + data);
};

其中onLeftClick方法在id为txt的元素被点击时触发.

onHtmlEvent //主网页收到头部或底部网页发送的数据的监听方法

uexNBListView.onHtmlEvent(info);

说明:

主网页收到头部或底部网页发送的数据的监听方法

参数:

var info = {
    listViewId:,
    data:
}

各字段含义如下:

平台支持:

Android2.2+

版本支持:

Android3.0.1+

示例:

uexNBListView.onHtmlEvent = function(data){
    //alert("onHtmlEvent->" + data);
}

3、更新历史

iOS

API版本: uexNBListView-4.0.0

最近更新时间:2016-11-17

Android

API版本: uexNBListView-4.0.0

最近更新时间:2016-11-17

4、附录

SwipeType

RefreshMode

RefreshStatus

OpenType

ErrorCode

VariableSupport

5、技术专题

数据载入方式

uexNBListView在使用过程中,需要优先调用initLayout初始化布局方法,布局在定义时需要指定哪些数据在列表中是动态的,然后在setItems,insert或者update接口时对应的传入相应的数据.举例如下: 布局文件:

<?xml version="1.0" encoding="utf-8"?>
<root layoutId = "2" layoutType = "${type}">
    <linearlayout id = "content" orientation = "horizontal" width = "-1"
                  height = "-2" background="${backgroundColor}" gravity = "center">
        <text id = "text" width = "-2" height = "-2" text="${title}"
              textColor = "#000000" weight = "1"/>
        <button width = "-2" height = "-2" text="查看详情" onClick = "onButtonClick"/>
    </linearlayout>
</root>

其中定义了两个控件元素,一个text显示标题,一个button显示操作按钮. 其中跟根布局linearlayout的背景颜色和text的文本内容需要动态变化,则定义id为content的linearlayout的background属性为:${自定义变量名},这里的"自定义变量名"为backgroundColor.同理定义id为text的text属性为${title}. 则在设置数据的时候,传入如下代码:

        var params = {
            listViewId:0,
            dataList:[
                {
                    center:{
                        "type":2,//指定布局id
                        "backgroundColor":"#dddddd",//定义背景颜色为灰色
                        "title":"平凡的世界"//定义标题
                    }
                },
                {
                    center:{
                        "type":2,//指定布局id
                        "backgroundColor":"#ffffff",//定义背景颜色为白色
                        "title":"三国演义"//定义标题
                    }
                }
            ]
        };
        var data = JSON.stringify(params);
        uexNBListView.setItems(data);

则运行效果为:

注意事项

1、 需要动态更新的数据,必须唯一指定该元素的id,如上例中的linearlayout的id为content,text的id为text. 2.、定义变量名时必须是形如${XXX},XXX表示自定义的名称,该名称不能再包含"$"、"{"和"}"符号,并且和传入数据时的key一一对应;

1. 目前只支持部分属性的动态更新,详情请参考附录,属性的取值范围及规则参考"自定义布局指引文档"中的各属性介绍。