MUI div模式侧滑菜单（右），主页面不动，无切换展示功能

最新推荐文章于 2021-05-31 01:43:29 发布
最新推荐文章于 2021-05-31 01:43:29 发布
阅读量514 收藏 2
点赞数
分类专栏： # 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42547014/article/details/106566440
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			.mui-off-canvas-left {
				color: #fff;
			}

			.title {
				margin: 35px 15px 10px;
			}

			.title+.content {
				margin: 10px 15px 35px;
				color: #bbb;
				text-indent: 1em;
				font-size: 14px;
				line-height: 24px;
			} 
		</style>
	</head>

	<body>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!--侧滑菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-left">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="title">侧滑导航</div>
						<div class="content">

						</div>
						<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
						<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 1
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 2
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 3
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 4
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 5
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 6
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 1
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 2
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 3
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 4
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 5
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 6
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 1
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 2
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 3
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 4
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 5
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									Item 6
								</a>
							</li>
						</ul>
					</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-left"></a>
					<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
					<h1 class="mui-title">div模式右滑菜单</h1>
				</header>
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-content-padded">
							<p>这是可拖动式右滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容； 打开侧滑菜单有多种方式：
								1、在当前页面向右拖动； 2、点击页面左上角的
								<span class="mui-icon mui-icon-bars"></span> 图标； 3、通过JS API触发（例如点击如下蓝色按钮体验）；
								<span class="android-only">4、Android手机按menu键；</span>
							</p>
							<p>这是可拖动式右滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容； 打开侧滑菜单有多种方式：
								1、在当前页面向右拖动； 2、点击页面左上角的
								<span class="mui-icon mui-icon-bars"></span> 图标； 3、通过JS API触发（例如点击如下蓝色按钮体验）；
								<span class="android-only">4、Android手机按menu键；</span>
							</p>
							<p>这是可拖动式右滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容； 打开侧滑菜单有多种方式：
								1、在当前页面向右拖动； 2、点击页面左上角的
								<span class="mui-icon mui-icon-bars"></span> 图标； 3、通过JS API触发（例如点击如下蓝色按钮体验）；
								<span class="android-only">4、Android手机按menu键；</span>
							</p>
							<p>这是可拖动式右滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容； 打开侧滑菜单有多种方式：
								1、在当前页面向右拖动； 2、点击页面左上角的
								<span class="mui-icon mui-icon-bars"></span> 图标； 3、通过JS API触发（例如点击如下蓝色按钮体验）；
								<span class="android-only">4、Android手机按menu键；</span>
							</p>
							<p>这是可拖动式右滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容； 打开侧滑菜单有多种方式：
								1、在当前页面向右拖动； 2、点击页面左上角的
								<span class="mui-icon mui-icon-bars"></span> 图标； 3、通过JS API触发（例如点击如下蓝色按钮体验）；
								<span class="android-only">4、Android手机按menu键；</span>
							</p>
							<p>这是可拖动式右滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容； 打开侧滑菜单有多种方式：
								1、在当前页面向右拖动； 2、点击页面左上角的
								<span class="mui-icon mui-icon-bars"></span> 图标； 3、通过JS API触发（例如点击如下蓝色按钮体验）；
								<span class="android-only">4、Android手机按menu键；</span>
							</p>
						</div>

					</div>
				</div>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script>
			mui.init();
			//主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
		</script>
	</body>

</html>
卑微猿同学
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue+Mui实现列表侧滑删除功能.zip
04-16
Vue+Mui列表侧滑删除功能，点击删除按钮出现弹出弹框Vue+Mui列表侧滑删除功能，点击删除按钮出现弹出弹框
MUI 的侧滑菜单 详解
xd775799的博客
06-15 2万+
mui提供了两种侧滑导航实现：webview模式和div模式，两种模式各有优劣，适用于不同的场景。webview模式主页面和菜单内容在不同的webview中，两个页面根据内容需求分别组织DOM结构，mui对其DOM结构无特殊要求，故其有如下优点：菜单内容是单独的webview，故可被多个页面复用； 菜单内容在单独的webview中，菜单区域的滚动不影响主界面，故可使用原生滚动，滚动更为流畅； 另
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)
10-17
主要介绍了微信小程序MUI侧滑导航菜单,结合实例形式分析了微信小程序Popup弹出式,左侧不动，右侧滑动菜单相关实现技巧与注意事项,需要的朋友可以参考下
mui 侧滑菜单
weixin_33882443的博客
05-14 327
  结构模板 这里是示例Html, 必须使用Mui框架才能使用。 主容器 &lt;div class="mui-off-canvas-wrap mui-draggable"&gt;&lt;/div&gt; 菜单窗体 &lt;aside class="mui-off-canvas-right"&gt;&lt;/aside&gt; 主窗体 &lt;div class="mui-conte
MUI 实现侧滑菜单及其主体部分上下滑动
yijiupingfan0914的博客
06-29 1022
在MUI文档的侧滑菜单介绍里没有说明如何实现侧滑，而MUI侧滑菜单默认是没有上下滑动功能的，需要激活。1、首先在 class="mui-scroll-wrapper" 的元素上添加ID：&lt;!-- 侧滑导航根容器 --&gt;&lt;div class="mui-off-canvas-wrap mui-draggable"&gt; &lt;!-- 菜单容器 --&gt; &lt;aside...
点击侧滑菜单条目改变主界面显示内容
03-23
点击侧滑菜单里面的条目改变主界面显示内容demo源码下载。。。。
mui 侧滑栏问题
qq_34328404的博客
07-21 565
侧滑栏无法滑动 初始化 mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 }); 可以解决 [email protected] - 学习生活，快乐成长 示例：初始化scroll控件： mui
前端-mui框架的div侧拉菜单，导致页面中按钮的点击事件无法响应的问题
追求，成长
09-10 4767
前言接手了服务端，也得搞点前端的东东，由于最近的任务是需要写一个有侧拉菜单的页面，而原有服务端项目的前端部分使用的是mui框架，刚好mui框架里有现成的侧拉菜单功能，那么就直接拿来用了. 开发中~~ 等差不多开发完了，却发现主页面的button、a元素等都无法响应点击事件，用了onclick=”和jquery绑定事件也是不响应，搞了半天，原来是mui框架存在的问题，为了避免有人再瞎折腾浪费时间，想想
MUI 顶部选项卡-可左右拖动(div)
热门推荐
WhoWrongsWhere的专栏
12-28 2万+
顶部选项卡-可左右拖动 .mui-control-content { background-color: white; min-height: 215px; } .mui-control-content .mui-loading { margin-top: 50px; } 顶部选项卡-可左右拖动(div) 待办公文
CSS3模拟侧滑菜单
淡忘~浅思
05-14 2479
在APP应用上，常见的一种导航方式是侧滑导航，效果类似于这样： 用CSS3可以对其进行模拟，代码如下： HTML：<nav> <div id="toggleMenu"> <span id="hide"></span> <span id="show"></span> </div> <ul id="lis
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
10-17
主要介绍了微信小程序MUI侧滑导航菜单,结合实例形式分析了微信小程序Popup弹出式,左侧滑动,右侧不动菜单功能相关实现技巧与注意事项,需要的朋友可以参考下
MUI 实现侧滑菜单及其主体部分上下滑动的方法
08-28
下面小编就为大家分享一篇MUI 实现侧滑菜单及其主体部分上下滑动的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
[MUI框架]-滑动侧边栏-webview模式
我的米饭
04-06 1万+
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
html5选项卡左侧,侧滑导航（div模式左滑菜单）主体菜单放入选项卡（左侧选项卡-div模式）选项卡无法区域滚动...
weixin_36345268的博客
05-31 456
Hello MUI.mui-row.mui-fullscreen>[class*="mui-col-"] {height: 100%;}.mui-col-xs-3,.mui-control-content {overflow-y: auto;height: 100%;}.mui-segmented-control .mui-control-item {line-height: 50px;wi...
JS中使用JSON作为方法参数
weixin_42547014的博客
03-30 1849
想要传递的JSON： { createtime: "2020-03-29T16:00:00.000+0000" id: 1 shape: null sjwbk: "2019-02-26" wbk: 123 wby: "在文本域中显示" xlcd: "第二项" } 传递方法： <div onclick="updateField('" + encodeURI(JSON.strin...
同一个HTML页面中引入多版本JQuery导致的冲突问题（已解决）
weixin_42547014的博客
11-02 1838
【问题产生原因】 项目中引入了JQuery插件，版本JQ1.9，添加新的功能时需要引入JQ2.1，引入后原有低版本的所有功能无法运行。 【解决方式】 利用jQuery.noConflict()函数 【具体解决过程】 1.为了不改动原有的JQuery2.1文件,新建一个JS，命名为MyJQuery.2.1.1.js 2.向MyJQuery.2.1.1.js文件中添加代码 (function () { var $JQ2 = jQuery.noConflict(true); })(); 3.将jquery
VUE_iview_在table上添加气泡提示
weixin_42547014的博客
07-29 1566
【表格中添加提示】 当表格内容过多时，用"…"表示，鼠标移上后显示详细信息 <Table stripe :data="pagelist1" :columns="newtableColumns1" border :loading="loading" ref="table"></Table> this.newtableColumns1.push({ width: '120', key: 'key', title: 'objtitle', align: 'center'
JS防止以0001为参数传递时转变为1
weixin_42547014的博客
10-10 1342
解决起来很简单，将0001以字符串的形式进行传递 onclick = "selectNum('0001')" function selectNum(num){ console.log(num) //0001 } onclick = "selectNum(0001)" function selectNum(num){ console.log(num) //1 } 拼接时实现方法 $('#selectNum').append( "<input type='check
MUI 在同一页面中动态添加多个picker选择器
weixin_42547014的博客
05-21 1262
【页面效果】 【说明】 由于业务需求，该页面所有文本框，文本域，选择器及选择器内选项皆为webview接收前一页面传来的JSON参数进行动态显示，此处忽略文本框和文本域，只做选择器。 【JSON参数】 字段信息：FieldParaMess 该变量存储着数据表的字段信息，比如字段类型，字段名称等 表内数据：obj 该变量存储着数据表内的详细数据 【代码】 <!DOCTYPE html> <html> <head> <meta charset="utf
mui tab 不设置左右滑动切换
最新发布
05-18
如果你想禁止 MUI Tab 组件的左右滑动切换功能，可以通过以下两种方法实现： 1. 使用 CSS 样式 在 MUI Tab 组件所在的页面或组件中，添加如下 CSS 样式： ``` .mui-slider-handle { pointer-events: none; } ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值