[MUI框架]-滑动侧边栏-webview模式

MUI 官网：http://dev.dcloud.net.cn/mui/
使用前准备，先下载HBuilder：http://www.dcloud.io/，然后新建移动APP里面的mui项目，则会自动生成所需的css文件和js文件。

第一步：引入必要的文件

引入css以及js：

<link href="css/mui.min.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>

第二步：写出必要的结构

    <header class="mui-bar mui-bar-nav"><a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a><h1 class="mui-title">off canvas（侧滑导航）</h1></header><div class="mui-content"><div class="mui-content-padded"><p>这是webview模式右滑导航示例，主页面和菜单在不同的webview中，优点是支持菜单内容在多页面的复用，缺点是不支持拖动手势（跟手）；当前页面为主界面，你可以在主界面放置任何内容；</p><p style="padding: 5px 20px;margin-bottom: 5px;"><button id="show-btn" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 10px;">显示侧滑菜单</button></p></div></div>

第三步：写上必要的启动js

    <script>//生成2个对象分别控制主窗口和菜单窗口；var menu = null,main = null;var showMenu = false;var isInTransition = false;//开始预加载菜单页；mui.plusReady(function() {main = plus.webview.currentWebview();main.addEventListener('maskClick', closeMenu);//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；setTimeout(function() {menu = mui.preload({id: 'sidemenu',url: 'sidemenu.html',styles: {left: 0,width: '70%',zindex: -1}});}, 200);});//打开侧滑窗口；function openMenu() {if (isInTransition) {return;}if (!showMenu) {//侧滑菜单处于隐藏状态，则立即显示出来；isInTransition = true;menu.setStyle({mask: 'rgba(0,0,0,0)'}); //menu设置透明遮罩防止点击menu.show('none', 0, function() {//主窗体开始侧滑并显示遮罩main.setStyle({mask: 'rgba(0,0,0,0.4)',left: '70%',transition: {duration: 200}});mui.later(function() {isInTransition = false;menu.setStyle({mask: "none"}); //移除menu的mask}, 200);showMenu = true;});}};//关闭侧滑窗口；function closeMenu() {if (isInTransition) {return;}if (showMenu) {//关闭遮罩；//主窗体开始侧滑；isInTransition = true;main.setStyle({mask: 'none',left: '0',transition: {duration: 200}});showMenu = false;//等动画结束后，隐藏菜单webview，节省资源；mui.later(function() {isInTransition = false;menu.hide();}, 200);}};//点击头部菜单小图标，打开侧滑菜单；document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);//点击自定义按钮，打开侧滑菜单；document.querySelector('#show-btn').addEventListener('tap', openMenu);//menu页面点击后关闭菜单；window.addEventListener("menu:tap", closeMenu);</script>

[MUI框架]-滑动侧边栏-webview模式相关推荐

关于MUI框架中，“侧滑导航“之“div模式下拉菜单“的a标签（超链接）的失效问题？
关于MUI框架中,"侧滑导航"之"div模式下拉菜单"的a标签(超链接)的失效问题? 截图和讲解图片的顺序如下所示: 图1 图2 · 官方的截图图3 · 官方 ...
连接真机开发安卓(Android)移动app MUI框架完善购物车订单等页面——混合式开发（五）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 这周真的太忙了,就 ...
MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
细数mui框架走过的坑
一.2018.06.21mui.alert().mui.confirm()等弹窗系列 mui会根据ua判断,弹出原生对话框还是h5绘制的对话框,在基座中默认会弹出原生对话框,可以配置type属性,使得 ...
懂商业的技术合伙人(14)：使用HTML5开发App客户端，HTML5+和MUI框架基本介绍
我非常倾向使用HTML5,搞定PC Web.Mobile Web.Android和iOS.微信小程序等各种UI开发. 作为技术人员,一次学习,处处使用,是个美好的愿望. 本文把2014~2017年,零 ...
连接真机开发安卓(Android)移动app MUI框架——混合式开发（二）带你项目开发（最新版）
今天是很丧的一天,做什么都提不起兴趣,不知道何时才能做到道家的"无为,而无所不为",也无法理解范仲淹的"不以物喜不以己悲".可是再没兴趣,学习还是要继续!!!为 ...
mui ajax 懒加载,MUI框架运用中遇见问题总结
H5在移动端的开发趋势化越来越大,相对App来说,H5优势有: 跨平台,兼容性强开发速度快,成本较低迭代周期短技术成本低但当我们在开始移动端的项目开发时,又愁着有什么样的好的UI框架能让我们减 ...
制作拼多多app网页css,5+App下Mui框架开发仿拼多多App
5+App下Mui框架开发仿拼多多App 一.整体项目介绍说明二.页面展示三.页面实现主要技术和难点四.关键代码讲解五.源码资源一.整体项目介绍说明 "拼多多"App+移 ...
Android原生集成MUI框架进行混合开发
开发APP中我们经常进行原生结合H5进行混合开发,下面将进行详细讲解Android原生集成MUI框架进行混合开发(项目Demo如下,有需要的可以下载查看),下一篇讲述,Android原生和MUI(也适 ...

[MUI框架]-滑动侧边栏-webview模式

第一步：引入必要的文件

第二步：写出必要的结构

第三步：写上必要的启动js

[MUI框架]-滑动侧边栏-webview模式相关推荐

最新文章

热门文章