您好,欢迎访问三七文档
当前位置:首页 > 临时分类 > 抽屉式侧滑布局交互示例,应用更加高炫拽
抽屉式侧滑布局交互示例,应用更加高炫拽!此分享是对官网不久前上线的api.openDrawerLayout(抽屉式侧滑window布局)方法做了一个简单的实例,基于这个简单的布局大家可以在这之上再去做更复杂的布局交互,或者直接使用这个到你的应用当中,让你的应用更加的高炫拽。1../index.html我这里并没有在index.html初始时完成以后立马布局侧滑,原因是我得给大家演示了关闭侧滑的方法,而实际我们为了应用体验更加的友好,会在index.html需要初始化时就完成这个布局。按照官网的介绍openDrawerLayout实际就是在openWin方法的基础上新增了leftPane、rightPane参数,所以openWin的任何方法都是可以在这里使用,比如在打开测试时用的载入动画animation字段。如上所述所以openDrawerLayout方法与openWin一样只接受一个参数,其中我这里使用到的name是主体的window名称,对应的主体url路径。leftPane是侧滑的配置name、url与主体功能一致。而animation这是整个侧滑布局的动画,并不是侧滑时的动画。除此三个字段以外还有其它好几十个字段,我这就不做演示啦,大家下来自己研究研究。2../html/main.html这个页面是整个侧滑布局的主体展示部分,很多情况下除了手势滑动侧滑外,还会经常用到手动展开侧滑,我在这个页面使用JS封装了关于此需求对应的openDrawerPane方法,侧滑布局是针对全局APP生效的(即整个应用同时仅运行一个侧滑布局),所以这里关于所有侧滑的方法可以全局去使用,我在index.html中openDrawerLayout的布局,而现在我是在main.html中去使用openDrawerPane来展开侧滑。同第1点提到的openDrawerLayout实际就是在openWin方法的基础上新增的方法,所以依照window的关闭方式,侧滑布局同样适用,因为我当前就在侧滑布局中,所以直接执行closeWin即可关闭侧滑布局,如果你未在侧滑布局中关闭侧滑,那么只需要在closeWin时,新增name字段,比如我这里写api.closeWin({name:'main'});结果一模一样。3../html/leftPane.html这个页面是整个侧滑布局的侧滑窗格展示部分,该部分被展开时实际就会对应到main.htmlopenDrawerPane方法相反的需求,所以一样的,因为侧滑布局全局的理念,我就直接使用侧滑类中的closeDrawerPane关闭这个窗格。当然在这个页面也会有关闭侧滑布局的需求,所以同理,直接closeWin即可。源码:演示视频:
本文标题:抽屉式侧滑布局交互示例,应用更加高炫拽
链接地址:https://www.777doc.com/doc-2373261 .html