下载文档

Listview列表组件
更新时间:2016-05-25

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

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

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