Listview列表组件
- 依赖
- JS对象

Listview列表组件

列表组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成列表控件的开发。

依赖

appcan.js
appcan.control.js
appcan.listview.js
appcan.control.css

JS对象

函数

appcan.listview({参数})

1. selector:   /*选择器*/,
2. type:   thinLine or thickLine /*窄行和宽行设定*/,
3. hasIcon:   true or false /*是否有图片*/,
4. hasAngle:   true or false /*是否有右侧箭头*/,
5. hasSubTitle:   true or false /*是否有子标题*/,
6. hasTouchEffect:   true or false /*是否有点击效果*/,
7. hasCheckbox:   true or false /*是否有复选按钮*/,
8. hasRadiobox:   true or false /*是否有单选按钮*/,
9. align:   "left" or "right" /*checkbox和radiobox居左还是居右*/,
10. multiLine:  1 2 or 3 /*主标题文字占用最大行数。到达行数显示不全使用…替换*/,
11. touchClass:   'sc-bg-active' or 用户自定义 /*列表条目点击效果CSS类*/,
12. hasControl:   true or false /*列表条目中是否包含switch组件。*/
13. hasGroup:   true or false /*列表条目是否以分组的形式展示。*/

示例

1. var lv = appcan.listview({
2. selector : "#listview",
3. type : "thinLine",
4. hasIcon : false,
5. hasAngle : false,
6. hasSubTitle : false,
7. hasTouchEffect:true,
8. hasCheckbox: false,
9. hasRadiobox: false,
10. align:"left",
11. multiLine : 1,
12. touchClass : 'sc-bg-active',
13. hasControl: false,
14. hasGroup: false
15. });

方法：set(data)

参数

1. data:JSON   对象数组，用于存储列表条目显示的文字图片等信息。

示例

1. lv.set([{
2. title : "中国红",
3. subTitle : '<div class="umh1 umw3 us" style="background-color:#DF3031"></div>',
4. }, {
5. title : "蜜桃粉",
6. subTitle : '<div class="umh1 umw3 us" style="background-color:#EC6897"></div>',
7. }, {
8. title : "青草绿",
9. subTitle : '<div class="umh1 umw3 us" style="background-color:#66C669"></div>',
10. }, {
11. title : "天际蓝",
12. subTitle : '<div class="umh1 umw3 us" style="background-color:#00A0E9"></div>',
13. }, {
14. title : "子夜灰",
15. subTitle : '<div class="umh1 umw3 us" style="background-color:#434343"></div>',
16. }]);

方法：add(data,dir)

参数

1. data: JSON 对象数组，用于存储列表条目显示的文字图片等信息。
2. dir: 0 or 1  用于设定数据是在列表前部添加还是后部添加。0为前部添加，1为后部添加。默认为0

示例

1. lv1.add([{
2. title : "金黄",
3. subTitle : '<div class="umh1 umw3 us" style="background-color:#FFD700"></div>'}]
4. ,1);

事件：click

列表条目备点击时调用此事件

参数

1. Obj  列表条目DOM对象
2. Data 列表条目对应数据源对象
3. subObj 列表条目点击时的子元素DOM对象例如图片

示例：

1. var lvData =
2. [{
3. title : "uexWheel",
4. describe : '轮盘菜单 ',
5. pagename : "uexWheel",
6. pageurl:"UIapi/uexWheel.html"
7. },{
8. title : "uexWheel2",
9. describe : '轮盘菜单2 ',
10. pagename : "uexWheel2",
11. pageurl:"UIapi/uexWheel2.html"
12. }];
13. lv1.set(lvData);
14. lv1.on("click",function(obj,data,subObj){
15. console.log(obj);
16. console.log(data);
17. console.log(subObj);
18. appcan.window.open(data.pagename,data.pageurl,10);
19. })

事件：checkbox:change

列表条目复选框变更时产生此事件

参数：

1. Obj   列表条目DOM对象
2. Data  列表条目对应数据源对象，其中checked属性代表选择状态

示例：

1. lv1.on("checkbox:change",function(obj,data){
2. console.log(obj);
3. console.log(data);
4. })

事件：radio:change

列表单选框变更时产生此事件

参数：

1. Obj   列表条目DOM对象
2. Data  列表条目对应数据源对象 其中checked属性代表选择状态

示例：

1. lv1.on("radio:change",function(obj,data){
2. console.log(obj);
3. console.log(data);
4. })

事件：switch:change

列表条目中的switch控件变更时产生此事件

参数：

1. Obj   列表条目DOM对象
2. Data  列表条目对应数据源对象 其中switchBtn.value代表switch状态,switchBtn.mini代表switch的样式

示例：

1. lv1.on("switch:change",function(obj,data){
2. console.log(obj);
3. console.log(data);
4. })

范例

HTML5代码:

1. <div id="listview" class="ubt sc-border sc-bg">
2. </div>

JS代码

1. 有icon:set(data)中的JSON

1. var hasSmallIcon =
2. [{
3. title : "ISIS分支宣布将一法国人斩首。该组织声称如果法国不停止打击ISIS，将杀掉人质",
4. describe:"",
5. note : "",
6. subTitle : "",
7. subDescribe : "",
8. subNote : "12:03",
9. icon : "../css/res/appcan_s.png",
10. icontitle:"",
11. "switchBtn":{
12. mini:true,
13. value:true
14. }
15. }];
16. lv1.set(hasSmallIcon);

单选列表

1. var lv = appcan.listview({
2. selector : "#listview",
3. type : "thinLine",
4. hasIcon : false,
5. hasAngle : false,
6. hasSubTitle : false,
7. multiLine : 1,
8. hasRadiobox : true,
9. align : 'left'
10. });

12. lv.set([{
13. title : "中国红",
14. subTitle : '<div class="umh1 umw3 us" style="background-color:#DF3031"></div>',
15. }, {
16. title : "蜜桃粉",
17. subTitle : '<div class="umh1 umw3 us" style="background-color:#EC6897"></div>',
18. }, {
19. title : "青草绿",
20. subTitle : '<div class="umh1 umw3 us" style="background-color:#66C669"></div>',
21. }, {
22. title : "天际蓝",
23. subTitle : '<div class="umh1 umw3 us" style="background-color:#00A0E9"></div>',
24. }, {
25. title : "子夜灰",
26. subTitle : '<div class="umh1 umw3 us" style="background-color:#434343"></div>',
27. }]);

带switch控件列表

1. var lv1 = appcan.listview({
2. selector : "#listview",
3. type : "thinLine",
4. hasIcon : false,
5. hasAngle : false,
6. hasControl:true,//包含控件
7. });
8. lv1.set([{
9. title : "Switch:false",
10. "switchBtn":{//switch控件配置
11. value:false,
12. mini:true
13. }
14. },{
15. title : "Switch:true",
16. "switchBtn":{
17. value:true,
18. mini:true
19. }
20. }
21. ]);
22. lv1.on("switch:change",function(obj,data){
23. lv1.updateItem(obj,"title","Switch:"+data.switchBtn.value);
24. })

以组的形式展示的列表

1. var lv1 = appcan.listview({
2. selector : "#listview",
3. type : "thinLine",
4. hasGroup : true,
5. hasAngle : false
6. });
7. lv1.set([{
8. title : "A",
9. groupId : "A",
10. items : [{
11. title : "上海伯母杀婴案开庭 嫌犯忏悔",
12. icon : "../css/res/appcan_s.png"
13. }, {

15. title : "百万日军投降，武器去向如何？国共并非对半分！",
16. icon : "../css/res/appcan_s.png"
17. }, {
18. title : "港媒：占中不得人心，内讧频繁！！",
19. icon : "../css/res/appcan_s.png"
20. }]
21. }, {
22. title : "B",
23. groupId : "B",
24. items : [{
25. title : "iPhone6 本月将登陆韩国：三星或兵败家门口",
26. icon : "../css/res/appcan_s.png"
27. }, {
28. title : "苹果前雇员为乔帮主洗冤：个性强烈非恶意",
29. icon : "../css/res/appcan_s.png"
30. }]
31. }]);

注：更多Listview示例详见官网首页功能演示App:HiAppcan