function pullfresh-function() { //业务逻辑代码,比如通过ajax从服务器获取新数据; ...... //注意,加载完新数据后,必须执行如下代码,注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后 mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); }
上拉加载
mui的上拉加载实现比较简单,检测5+ runtime提供的滚动条滚动到底事件(plusscrollbottom),显示“正在加载”提示-->开始加载业务数据-->隐藏"正在加载"提示。使用方式类似下拉刷新,首先、通过mui.init方法中pullRefresh参数配置上拉加载各项参数,如下:
mui.init({ pullRefresh : { container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等 up : { contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容 contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容; callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据; } } });
其次,根据具体业务编写加载函数,需要注意的是,加载完新数据后,需要执行endPullupToRefresh()方法;
function pullfresh-function() { //业务逻辑代码,比如通过ajax从服务器获取新数据; ...... //注意,加载完新数据后,必须执行如下代码,true表示没有更多数据了,两个注意事项: //1、若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后 //2、注意this的作用域,若存在匿名函数,需将this复制后使用,参考hello mui中的代码示例; this.endPullupToRefresh(true|false); }
注意:
//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数; mui('#pullup-container').pullRefresh().refresh(true);
输入增强
mui目前提供的输入增强包括:快速删除和语音输入两项功能。要删除输入框中的内容,使用输入法键盘上的删除按键,只能逐个删除字符,mui提供了快速删除能力,只需要在对应input控件上添加.mui-input-clear类,当input控件中有内容时,右侧会有一个删除图标,点击会清空当前input的内容;另外,为了方便快速输入,mui集成了HTML5+的语音输入,只需要在对应input控件上添加.mui-input-speech类,就会在该控件右侧显示一个语音输入的图标,点击会启用科大讯飞语音输入界面。
开关事件
mui提供了开关控件样式,点击滑动两种手势都可以对开关控件进行操作,在开关控件进行切换时,会触发toggle事件,通过事件的detail.isActive属性可以判断当前开关状态。可通过监听toggle事件,在开关切换时执行特定业务逻辑。如下为使用示例:
document.getElementById("mySwitch").addEventListener("toggle",function(event){ if(event.detail.isActive){ console.log("你启动了开关"); }else{ console.log("你关闭了开关"); } })
若要获得当前开关状态,可通过判断当前开关控件是否包含.mui-active类来实现,若包含,则为打开状态,否则即为关闭状态;如下为代码示例:
var isActive = document.getElementById("mySwitch").classList.contains("mui-active"); if(isActive){ console.log("打开状态"); }else{ console.log("关闭状态"); }
若使用js打开、关闭开关控件,可使用switch插件的toggle()方法,如下为示例代码:
mui("#mySwitch").switch().toggle();
slide事件