下载文档

API
更新时间:2016-08-04

1、简介

自定义布局列表插件

1.1、说明

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

1.2、UI展示

1.3、自定义下载使用

插件测试用例下载:点击 插件中心至插件详情页
(自定义beta版插件下载上传到我的插件勾选使用)

2、API概览

2.1、方法

initLayout 初始化布局

uexNBListView.initLayout(params);

说明:

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

参数:

  1. var params ={
  2. listViewId:,
  3. layout:{
  4. center:[],
  5. left:[],
  6. right:[]
  7. }
  8. }

各字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 唯一标识符
layout Json 布局关键字
center Array 主布局
left Array 列表项向右滑动时左侧显示的布局
right Array 列表项向左滑动时右侧显示的布局

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. var params = {
  2. listViewId:0,
  3. layout:{
  4. center:["res://case1/layout_item1.xml","res://case1/layout_item2.xml"],
  5. left:["res://case1/layout_left.xml"],
  6. right:["res://case1/layout_right.xml"]
  7. }
  8. };
  9. var data = JSON.stringify(params);
  10. uexNBListView.initLayout(data);

setItems 设置列表数据

uexNBListView.setItems(params);

说明:

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

参数:

  1. var params ={
  2. listViewId:,
  3. dataList:[//列表数据
  4. {
  5. center:{},
  6. left:{},
  7. right:{}
  8. }
  9. ]
  10. }

各字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 唯一标识符
dataList Json数组 列表数据关键字
center Json 主布局数据,键值对,与相应的布局文件中的变量key对应, 至少包含指定布局唯一标识符id键值对,详见示例
left Json 列表项向右滑动时,左侧布局数据,键值对,与相应的布局文件中的变量key对应, 至少包含指定布局唯一标识符id键值对,详见示例
right Json 列表项向左滑动时,右侧布局数据,键值对,与相应的布局文件中的变量key对应, 至少包含指定布局唯一标识符id键值对,详见示例

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

layout_item1布局代码:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <root layoutId = "1" layoutType = "${type1}">
  3. <linearlayout width = "-1" height = "250" background = "#ffffff"
  4. gravity = "centerY">
  5. <linearlayout orientation = "horizontal" width = "-1"
  6. height = "-2">
  7. <linearlayout orientation = "vertical" width = "-1"
  8. height = "-1" weight = "1" gravity = "centerX">
  9. <img width = "-2" height = "-2" src = "${img1}"
  10. onClick = "onListViewItemClick" id = "img1"/>
  11. <text id = "txt1" width = "-2" height = "-2" text="${text1}" textSize = "${text1-size}"
  12. margin = "0 5" textColor = "${text1-color}"/>
  13. </linearlayout>
  14. <linearlayout orientation = "vertical" width = "-1"
  15. height = "-1" weight = "1" gravity = "centerX">
  16. <img width = "-2" height = "-2" src = "res://case1/005.png"
  17. onClick = "onListViewItemClick" id = "img2"/>
  18. <text id = "txt2" width = "-2" height = "-2" text="${text2}" textSize = "13" visible = "${visible2}"
  19. margin = "0 5" textColor = "#000000"/>
  20. </linearlayout>
  21. <linearlayout orientation = "vertical" width = "-1"
  22. height = "-1" weight = "1" gravity = "centerX">
  23. <img width = "-2" height = "-2" src = "res://case1/006.png"
  24. onClick = "onListViewItemClick" id = "img3"/>
  25. <text id = "txt3" width = "-2" height = "-2" text="${text3}" textSize = "13"
  26. margin = "0 5" textColor = "#000000"/>
  27. </linearlayout>
  28. <linearlayout orientation = "vertical" width = "-1"
  29. height = "-1" weight = "1" gravity = "centerX">
  30. <button width = "-2" height = "-2" background = "${button-bg}"
  31. text="${button-text}" textSize = "${button-textSize}"
  32. textColor = "${button-textColor}"
  33. onClick = "onListViewItemClick" id = "img4"/>
  34. <text id = "txt4" width = "-2" height = "-2" text="${text4}" textSize = "13"
  35. margin = "0 5" textColor = "#000000"/>
  36. </linearlayout>
  37. </linearlayout>
  38. </linearlayout>
  39. </root>

layout_item2布局代码:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <root layoutId = "2">
  3. <linearlayout id = "content" orientation = "horizontal" width = "-1"
  4. height = "400" background="${content_bg}">
  5. <linearlayout id = "linearlayout2-1" width = "-1" height = "-1" weight = "1" gravity = "bottom"
  6. background="${left_pic}" margin = "20"
  7. onClick = "onListViewItemClick">
  8. <linearlayout orientation = "horizontal" width = "-1"
  9. height = "-2" background = "#66000000"
  10. gravity="centerX">
  11. <text id = "txt2-1" width = "-2" height = "-2" text="东圣九州国际大饭店" textSize = "14"
  12. margin = "0 0" textColor = "#ffffff"/>
  13. </linearlayout>
  14. </linearlayout>
  15. <linearlayout id = "linearlayout2-2" width = "-1" height = "-1" weight = "1" gravity = "bottom"
  16. background="res://case1/BaDongQian.jpg" margin = "20"
  17. onClick = "onListViewItemClick">
  18. <linearlayout orientation = "horizontal" width = "-1"
  19. height = "-2" background = "#66000000"
  20. gravity="centerX">
  21. <text id = "txt2-2" width = "-2" height = "-2" text="大面山" textSize = "14"
  22. margin = "0 0" textColor = "#ffffff"/>
  23. </linearlayout>
  24. </linearlayout>
  25. </linearlayout>
  26. </root>

layout_left布局代码:

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

layout_right布局代码:

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

setItems接口数据传入方式:

  1. var params = {
  2. listViewId:0,
  3. dataList:[
  4. {
  5. center:{
  6. "type1":1,//指定布局id,这里对应initLayout接口的layout_item1布局,该布局文件定义了layoutType的属性值为${type1},则需要在这里通过type1关键字指定布局id。值1和layout_item1布局文件中的layoutId属性值一致。
  7. //以下键值对中键是与layout_item1布局文件中定义的变量值(形如:${变量值})对应,值即是相对应的属性值。
  8. "text1" : "测试1",
  9. "text2" : "测试2",
  10. "text3" : "测试3",
  11. "text4" : "测试4",
  12. "img1":"res://case1/006.png",
  13. "text1-color":"#ff0000",
  14. "text1-size":15,
  15. "visible2":0,
  16. "button-text":"btn1",
  17. "button-textSize":20,
  18. "button-textColor":"#00ff00",
  19. "button-bg":"#dddddd"
  20. },
  21. left:{
  22. "layoutId" : "left",//指定布局id,这里对应initLayout接口的layout_left布局,该布局文件没有定义layoutType属性,则需要在这里通过layoutId关键字指定布局id。值left和layout_left布局文件中的layoutId属性值一致。
  23. "left-button" : "left1"
  24. },
  25. right:{
  26. "layoutId" : "right",//指定布局id,这里对应initLayout接口的layout_right布局,该布局文件没有定义layoutType属性,则需要在这里通过layoutId关键字指定布局id。值right和layout_right布局文件中的layoutId属性值一致。
  27. "right-button" : "right1"
  28. }
  29. },
  30. {
  31. center:{
  32. "layoutId":2,
  33. "content_bg":"#ff0000",
  34. "left_pic":"res://case1/BaDongQian.jpg"
  35. },
  36. left:{
  37. "layoutId" : "left",
  38. "left-button" : "left3"
  39. },
  40. right:{
  41. "layoutId" : "right",
  42. "right-button" : "right3"
  43. }
  44. }
  45. ]
  46. };
  47. var data = JSON.stringify(params);
  48. uexNBListView.setItems(data);

open 打开自定义布局列表

uexNBListView.open(params);

说明:

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

参数:

  1. var params ={
  2. listViewId:,
  3. left:,
  4. top:,
  5. width:,
  6. height:,
  7. swipeMode:,
  8. offsetLeft:,
  9. offsetRight:,
  10. refreshMode:,
  11. refreshTimeout:,
  12. openType:,
  13. containerID:,
  14. containerIndex:,
  15. backgroundColor:
  16. }

各字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 唯一标识符
left Number 左间距
top Number 上间距
width Number
height Number
swipeMode Number 侧滑模式,参考SwipeType,默认3
offsetLeft Number 向左滑动时右侧布局显示的宽度,swipeMode支持左滑时必选。
建议和右侧布局的宽度一致。
offsetRight Number 向右滑动时左侧布局显示的宽度,swipeMode支持右滑时必选。
建议和左侧布局的宽度一致
refreshMode Number 刷新模式,参考RefreshMode,默认0
refreshTimeout Number 刷新超时时间,单位毫秒。在refreshMode非等于0有效,默认为3000
openType Number 打开方式,参考OpenType
containerID String 只在openType为2时有效且必选,并且该容器已经通过uexWindow中的 createPluginViewContainer方法创建成功
containerIndex Number 只在openType为2时有效且必选。指定该列表视图在容器中的索引
backgroundColor String listView的背景色,不传默认为透明

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. var params = {
  2. listViewId:0,
  3. left: 0,
  4. top: 0,
  5. width:800,
  6. height:800,
  7. offsetLeft:400,//建议为右侧布局的宽度,这里为layout_right布局文件的宽度
  8. offsetRight:300,//建议为左侧布局的宽度,这里为layout_left布局文件的宽度
  9. swipeMode:3,
  10. refreshMode:0
  11. };
  12. var data = JSON.stringify(params);
  13. uexNBListView.open(data);

close 关闭自定义布局列表

uexNBListView.close(params);

说明:

关闭自定义布局列表

参数:

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

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

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

insert 插入数据

uexNBListView.insert(params);

说明:

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

参数:

  1. var params ={
  2. listViewId:,
  3. index:,
  4. dataList:[
  5. {
  6. center:{},
  7. left:{},
  8. right:{}
  9. }
  10. ]
  11. }

各字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 唯一标识符
index Number 数据插入的位置索引,取值范围大于等于0,小于等于当前列表长度, 若值大于当前列表长度
则默认插入到列表末尾
dataList Json数组 列表数据关键字
center Json 主布局数据,键值对,与相应的布局文件中的变量key对应,至少包含指定布局唯一标识符id键
值对,详见示例
left Json 列表项向右滑动时,左侧布局数据,键值对,与相应的布局文件中的变量key对应,至少包含指
定布局唯一标识符id键值对,详见示例
right Json 列表项向左滑动时,右侧布局数据,键值对,与相应的布局文件中的变量key对应,至少包含指
定布局唯一标识符id键值对,详见示例

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. var params = {
  2. listViewId:0,
  3. index:1,
  4. dataList:[
  5. {
  6. center:{
  7. "type1":1,
  8. "text1" : "add1",
  9. "text2" : "add2",
  10. "text3" : "add3",
  11. "text4" : "add4",
  12. "img1":"res://case1/006.png",
  13. "text1-color":"#000000",
  14. "text1-size":15,
  15. "visible2":0,
  16. "button-text":"btn1",
  17. "button-textSize":12,
  18. "button-textColor":"#00ff00",
  19. "button-bg":"res://case1/005.png"
  20. },
  21. left:{
  22. "layoutId" : "left",
  23. "left-button" : "addleft1"
  24. },
  25. right:{
  26. "layoutId" : "right",
  27. "right-button" : "addright1"
  28. }
  29. },
  30. {
  31. center:{
  32. "layoutId":2,
  33. "content_bg":"#00ff00",
  34. "left_pic":"res://case1/BaDongQian.jpg"
  35. },
  36. left:{
  37. "layoutId" : "left",
  38. "left-button" : "addleft2"
  39. },
  40. right:{
  41. "layoutId" : "right",
  42. "right-button" : "addright2"
  43. }
  44. }
  45. ]
  46. };
  47. var data = JSON.stringify(params);
  48. uexNBListView.insert(data);

update 更新数据

uexNBListView.update(params);

说明:

根据索引更新数据。cbUpdate

参数:

  1. var params ={
  2. listViewId:,
  3. index:,
  4. data:{
  5. center:{},
  6. left:{},
  7. right:{}
  8. }
  9. }

各字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 唯一标识符
index Number 数据插入的位置索引,取值范围大于等于0,小于等于当前列表长度,若值大于当前列表长度
则默认插入到列表末尾
data Json item数据关键字
center Json 主布局数据,键值对,此处不能指定布局id,只需传入要更新的数据即可
left Json 列表项向右滑动时,左侧布局数据,键值对
right Json 列表项向左滑动时,右侧布局数据,键值对

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. var params = {
  2. listViewId:0,
  3. index:0,
  4. data:{
  5. center:{
  6. "text1":"更新我" + index
  7. }
  8. }
  9. };
  10. var data = JSON.stringify(params);
  11. uexNBListView.update(data);

delete 删除数据

uexNBListView.delete(params);

说明:

根据唯一标识符和索引删除数据。回调方法cbDelete

参数:

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

各字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 唯一标识符
indexes Array 索引数组

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. var params = {
  2. listViewId:0,
  3. indexes:[0,1]
  4. };
  5. var data = JSON.stringify(params);
  6. uexNBListView.delete(data);

show 显示自定义列表

uexNBListView.show(params);

说明:

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

参数:

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

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. var params = {
  2. listViewId:0
  3. };
  4. var data = JSON.stringify(params);
  5. uexNBListView.show(data);

hide 隐藏自定义列表

uexNBListView.hide(params);

说明:

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

参数:

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

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. var params = {
  2. listViewId:0
  3. };
  4. var data = JSON.stringify(params);
  5. uexNBListView.hide(data);

setRefreshStatusCompleted 设置刷新完成状态

uexNBListView.setRefreshStatusCompleted(params);

说明:

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

参数:

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

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. var params = {
  2. listViewId:0
  3. };
  4. var data = JSON.stringify(params);
  5. uexNBListView.setRefreshStatusCompleted(data);

2.2、回调方法

cbInitLayout 初始化布局的回调方法

uexNBListView.cbInitLayout(params);

参数:

  1. var params ={
  2. listViewId:,
  3. errorCode:
  4. }

字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 唯一标识符
errorCode Number 错误码,请参考errorCode

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. uexNBListView.cbInitLayout = function(data){
  2. alert("cbInitLayout->" + data);
  3. }

cbSetItems 设置列表数据的回调方法

uexNBListView.cbSetItems(params);

参数:

  1. var params ={
  2. listViewId:,
  3. errorCode:
  4. }

字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 唯一标识符
errorCode Number 错误码,请参考errorCode

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. uexNBListView.cbSetItems = function(data){
  2. alert("cbSetItems->" + data);
  3. }

cbOpen 打开自定义布局列表的回调方法

uexNBListView.cbOpen(params);

参数:

  1. var params ={
  2. listViewId:,
  3. errorCode:
  4. }

字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 唯一标识符
errorCode Number 错误码,请参考errorCode

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. uexNBListView.cbOpen = function(data){
  2. alert("cbOpen->" + data);
  3. }

cbUpdate 更新数据的回调方法

uexNBListView.cbUpdate(params);

参数:

  1. var params ={
  2. listViewId:,
  3. errorCode:
  4. }

字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 唯一标识符
errorCode Number 错误码,请参考errorCode

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. uexNBListView.cbUpdate = function(data){
  2. alert("cbUpdate->" + data);
  3. }

cbInsert 插入数据的回调方法

uexNBListView.cbInsert(params);

参数:

  1. var params ={
  2. listViewId:,
  3. errorCode:
  4. }

字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 唯一标识符
errorCode Number 错误码,请参考errorCode

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. uexNBListView.cbInsert = function(data){
  2. alert("cbInsert->" + data);
  3. }

cbDelete 删除数据的回调方法

uexNBListView.cbDelete(params);

参数:

  1. var params ={
  2. listViewId:,
  3. errorCode:
  4. }

字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 唯一标识符
errorCode Number 错误码,请参考errorCode

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

  1. uexNBListView.cbDelete = function(data){
  2. alert("cbDelete->" + data);
  3. }

2.3、监听方法

onPullRefreshHeader 下拉刷新的监听方法

uexNBListView.onPullRefreshHeader(params);

参数:

  1. var params ={
  2. status:
  3. }

字段含义如下:

参数名称 参数类型 是否必选 说明
status Number 刷新状态,请参考RefreshStatus

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

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

onPullRefreshFooter 上拉刷新的监听方法

uexNBListView.onPullRefreshFooter(params);

参数:

  1. var params ={
  2. status:
  3. }

字段含义如下:

参数名称 参数类型 是否必选 说明
status Number 刷新状态,请参考RefreshStatus

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

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

XXX 自定义布局内的元素被点击的监听方法

uexNBListView.XXX(params);

说明:

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

参数:

  1. var params ={
  2. listViewId:,
  3. index:,
  4. id:
  5. }

字段含义如下:

参数名称 参数类型 是否必选 说明
listViewId String 列表唯一标识符
index String 元素所在列表中的项数
id Number 元素的唯一标识符

平台支持:

Android2.2+
iOS6.0+

版本支持:

Android3.0.0+
iOS3.0.0+

示例:

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

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

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

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

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

3、更新历史

iOS

uexNBListView目前不支持iOS

Android

API版本:uexNBListView-3.0.0

最近更新时间:2015-11-24

历史发布版本 更新内容
3.0.0 自定义布局列表功能插件

4、附录

SwipeType

value 说明
0 可以向右滑动
1 可以向左滑动
2 左右都可以滑动
3 左右都不能滑动

RefreshMode

value 说明
0 无刷新模式
1 只支持下拉刷新
2 只支持上拉刷新
3 上拉下拉刷新都支持

RefreshStatus

value 说明
0 开始刷新
1 刷新完成
2 刷新超时

OpenType

value 说明
0 可以跟随网页滚动
1 不随网页滚动
2 列表添加到容器中,可实现容器中视图的左右滑动切换功能

ErrorCode

errorCode 说明
0 成功
1 失败,未知错误
-1 参数错误
-2 未初始化布局错误
-3 未打开列表错误

VariableSupport

属性名 说明
textSize 字体大小
textColor 字体颜色
text 文本内容
src 图片地址
background 背景
visible 是否可见

5、技术专题

数据载入方式

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

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

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

  1. var params = {
  2. listViewId:0,
  3. dataList:[
  4. {
  5. center:{
  6. "type":2,//指定布局id
  7. "backgroundColor":"#dddddd",//定义背景颜色为灰色
  8. "title":"平凡的世界"//定义标题
  9. }
  10. },
  11. {
  12. center:{
  13. "type":2,//指定布局id
  14. "backgroundColor":"#ffffff",//定义背景颜色为白色
  15. "title":"三国演义"//定义标题
  16. }
  17. }
  18. ]
  19. };
  20. var data = JSON.stringify(params);
  21. uexNBListView.setItems(data);

则运行效果为:

注意事项

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

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