optionList带操作选项的列表组件

实现列表项可向左滑动后右侧显示隐藏内容,点击可进行自定义操作(此组件依赖最新的appcan.js及引擎支持)

依赖

  • appcan.js
  • appcan.control.js
  • appcan.optionList.js
  • appcan.control.css

UI展示

optionList带操作选项的列表组件 - 图1

JS对象
函数
appcan.optionList({参数})
  1. selector: /*选择器*/,
  2. type: hiddenLine /*隐藏类型*/,
  3. multiShow : false,/*滑动是否可显示多行隐藏的内容*/
  4. duration : 300ms /*滑动显示隐藏动画时间*/,
方法

set(data)

  1. data:JSON: 对象数组,用于存储列表条目显示的文字图片等信息。
  2. data.content: /*列表内容*/
  3. data.height: /*列表高度,默认为内容区域撑开高度*/
  4. data.onLongTap: /*列表长按事件回调函数*/
  5. data.hideOption.content: string/数组 /*隐藏区域内容*/
  6. data.hideOption.style.fontSize: /*隐藏区域字体大小*/
  7. data.hideOption.style.background: /*隐藏区域背景颜色*/
  8. data.hideOption.onClick(e,index,length): /*点击隐藏区域的回调函数*/ ;
  9. e:供操作的event,
  10. index:列表序列索引,
  11. length:列表长度

add(data,dir)

  1. data: JSON 对象数组,用于存储列表条目显示的文字图片等信息。
  2. dir: 0 or 1 用于设定数据是在列表前部添加还是后不。0为前部添加。默认为1
  3. on(e,index,length)
  4. e:供操作的event,
  5. index:列表序列索引,
  6. length:列表长度
例如

HTML5代码

  1. <div id="listview" >
  2. </div>

JS代码demo下载

  1. appcan.ready(function() {
  2. var updateData = [{
  3. content : "这是一个带操作选项的optionList的demo",
  4. height:"5em",
  5. hideOption : {
  6. content : ["操作1","操作2"],
  7. style :{
  8. fontSize : "2em",
  9. background : "red"
  10. },
  11. onClick:function(e,index,length){
  12. console.log(e);
  13. console.log(e.currentTarget);
  14. console.log(e.target);
  15. console.log(index);
  16. console.log(length);
  17. }
  18. },
  19. onLongTap:function(e,index){
  20. console.log(e);
  21. console.log(index);
  22. }
  23. }, {
  24. content : '
  25. 这是一个带操作选项的optionList的demo
  26. ',
  27. height:"3em",
  28. hideOption : {
  29. content : "
  30. 11111111
  31. 222222
  32. ",
  33. style :{
  34. fontSize : "1.5em",
  35. background : "red"
  36. },
  37. onClick:function(e,index,length){
  38. alert(2);
  39. }
  40. }
  41. }];
  42. var lv1 = appcan.optionList({
  43. selector : "#listview",
  44. type : "hiddenLine",
  45. id : 1,
  46. duration :"300ms",
  47. multiShow : false
  48. });
  49. lv1.set(updateData);
  50. lv1.on("click",function(e){
  51. alert(e);
  52. })
  53. })