小编最近用到了mui这个框架,倒是挺方便的,不过官方文档对于渲染数据的感觉写的不是很完整,我的点击事件能够成功还是依靠查询博客和站在巨人的肩膀上才可以成功!
折叠面板展示的效果是这样的
如果想绑定数据在li中,需要将折叠面板所在的div赋予id
<div class="mui-slider-group" id="workflow">
<div id="item1" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<ul id="flowdetail" class="mui-table-view ">
</ul>
</div>
</div>
</div>
之后的点击事件如下:
//添加列表项的点击事件
mui('#workflow').on('tap', 'li', function(e) {
var id = this.getAttribute('id');
var key = this.getAttribute('key');
localStorage.setItem("id", id);
localStorage.setItem("key", key);
//打开所有流程种类页面
mui.openWindow({
url: 'addnewflow.html',
id: 'addnewflow',
extras: { //自定义传参
id: id //这就是要传至noticedetail页面的值
},
createNew: false, //是否重复创建同样id的webview,默认为false:不重复创建,直接显示
show: {
autoShow: true, //页面loaded事件发生后自动显示,默认为true
aniShow: 'slide-in-right', //页面显示动画,默认为”slide-in-right“;
duration: 'animationTime' //页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
},
waiting: {
autoShow: true, //自动显示等待框,默认为true
title: '正在加载...', //等待对话框上显示的提示内容
options: {
width: 'waiting-dialog-widht', //等待框背景区域宽度,默认根据内容自动计算合适宽度
height: 'waiting-dialog-height', //等待框背景区域高度,默认根据内容自动计算合适高度
}
}
});
});
这样当点击任何一个折叠面板的时候,则会出发事件,跳转到相应的菜单中。