[MUI框架]-滑动侧边栏-div同页结构

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>

第二步：写出必要的结构

    <!-- 侧滑导航页根容器 --><div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable"><!-- 菜单容器 --><aside id="offCanvasSide" class="mui-off-canvas-right"><div class="mui-scroll-wrapper"><div class="mui-scroll"><!-- 菜单具体展示内容 --><p style="padding: 5px 20px;margin-bottom: 5px;">侧边menu菜单</p><p style="padding: 5px 20px;margin-bottom: 5px;"><button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button></p></div></div></aside><!-- 主页面容器 --><div class="mui-inner-wrap"><!-- 主页面标题 --><header class="mui-bar mui-bar-nav"><!-- 显示侧边栏按钮 --><a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a><h1 class="mui-title">标题</h1></header><div class="mui-content mui-scroll-wrapper"><div class="mui-scroll"><!-- 主界面具体展示内容 --><p>这是可拖动式左滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容；</p><p style="padding: 5px 20px;margin-bottom: 5px;"><button id="offCanvasShow" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 5px;">显示侧滑菜单</button></p></div></div><!-- 遮罩层 --><div class="mui-off-canvas-backdrop"></div></div></div>

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

由于我们自定义了显示和隐藏侧边栏的2个button按钮，所以要给这2个按钮绑定点击事件，如果你没有自己定义按钮，则下边的js就可以不用写了

    <script>document.getElementById('offCanvasShow').addEventListener('tap', function() {mui('#offCanvasWrapper').offCanvas('show');});document.getElementById('offCanvasHide').addEventListener('tap', function() {mui('#offCanvasWrapper').offCanvas('close');});</script>

如果你不需要手指在屏幕上滑动就出现侧边栏，则可以关掉swipe开关：

mui.init({swipe: false,
});

[MUI框架]-滑动侧边栏-div同页结构相关推荐

关于MUI框架中，“侧滑导航“之“div模式下拉菜单“的a标签（超链接）的失效问题？
关于MUI框架中,"侧滑导航"之"div模式下拉菜单"的a标签(超链接)的失效问题? 截图和讲解图片的顺序如下所示: 图1 图2 · 官方的截图图3 · 官方 ...
div+mui+vue.js 制作问卷调查单页 ——题目答案是造的json
div+mui+vue.js 制作问卷调查单页 --题目答案是造的json 先来看一下效果图: 主要就是用读取json题目和答案,记录答案ID. 一次性去读10道题目,vue.js控制当前题目的显示影 ...
MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
制作拼多多app网页css,5+App下Mui框架开发仿拼多多App
5+App下Mui框架开发仿拼多多App 一.整体项目介绍说明二.页面展示三.页面实现主要技术和难点四.关键代码讲解五.源码资源一.整体项目介绍说明 "拼多多"App+移 ...
HTML应用开发基础篇 - MUI 框架（三）MUI 布局
目录 1.MUI 栅格系统 2.MUI 标题栏 3.MUI 选项卡 4.卡片视图 5.轮播组件 6.列表 1.MUI 栅格系统 1).12 列响应栅格系统:父级容器上添加 .mui-row ,列上添加 ...
5+App下Mui框架开发仿拼多多App
5+App下Mui框架开发仿拼多多App 一.整体项目介绍说明二.页面展示三.页面实现主要技术和难点四.关键代码讲解五.源码资源一.整体项目介绍说明 "拼多多"App+移 ...
连接真机开发安卓(Android)移动app MUI框架完善购物车订单等页面——混合式开发（五）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 这周真的太忙了,就 ...
连接真机开发安卓(Android)移动app MUI框架——混合式开发（二）带你项目开发（最新版）
今天是很丧的一天,做什么都提不起兴趣,不知道何时才能做到道家的"无为,而无所不为",也无法理解范仲淹的"不以物喜不以己悲".可是再没兴趣,学习还是要继续!!!为 ...
mui ajax 懒加载,MUI框架运用中遇见问题总结
H5在移动端的开发趋势化越来越大,相对App来说,H5优势有: 跨平台,兼容性强开发速度快,成本较低迭代周期短技术成本低但当我们在开始移动端的项目开发时,又愁着有什么样的好的UI框架能让我们减 ...

[MUI框架]-滑动侧边栏-div同页结构

第一步：引入必要的文件

第二步：写出必要的结构

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

[MUI框架]-滑动侧边栏-div同页结构相关推荐

最新文章

热门文章