optionList带操作选项的列表组件

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

依赖

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

UI展示

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

set(data)

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

add(data,dir)

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

HTML5代码

<div id="listview" >
</div>

JS代码 demo下载

appcan.ready(function() {
var updateData = [{
            content : "这是一个带操作选项的optionList的demo",
            height:"5em",
            hideOption : {
                content : ["操作1","操作2"],
                style :{
                    fontSize : "2em",
                    background : "red"
                },
                onClick:function(e,index,length){
                    console.log(e);
                    console.log(e.currentTarget);
                    console.log(e.target);
                    console.log(index);
                    console.log(length);
                }
            }, 
            onLongTap:function(e,index){
                console.log(e);
console.log(index);
            }
        }, {
            content : '
        这是一个带操作选项的optionList的demo

',
            height:"3em",
            hideOption : {
                content : "
        11111111

        222222

",
                style :{
                    fontSize : "1.5em",
                    background : "red"
                },
                onClick:function(e,index,length){
                    alert(2);
                }
            }
        }];
var lv1 = appcan.optionList({
            selector : "#listview",
            type : "hiddenLine",
            id : 1,
            duration :"300ms",
            multiShow : false
        });
      lv1.set(updateData);
lv1.on("click",function(e){
alert(e);
})
})
还需要帮助吗? 联系我们
最新更新 8th Jul 2021