Q
[dcloudio/mui]mui-scalable的侧滑菜单中遮罩层显示很奇怪(引入mui.css文件异常,引入mui.min.css文件正常)
0
遮罩层对list界面遮盖区域异常
- 引入mui.css文件,遮罩层只能遮盖列表中间部分,第一列和最后一列无法遮盖,但换成mui.min.css文件后显示正常。官方文档中的例子是引入mui.min.css。对于mui.css和mui.min.css呈现的两种不同效果很奇怪。
A
回答
0
0
-
mui.css v2.2.0 会有问题。今天测试 v3.6.0 没有问题。
-
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-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="mui.css"/>
<script src="js/mui.min.js"></script>
</head>
<body class="bodyBackGround">
<div id="body" class="mui-off-canvas-wrap mui-draggable mui-scalable">
<!--mui-slide-in-->
<!--侧滑菜单部分-->
<aside class="mui-off-canvas-left" style="background-color: #fff; width: 80%;">
<div class="mui-scroll-wrapper">
<!-- 菜单具体展示内容 -->
<div class="mui-content-padded mui-con">
菜单展示内容
</div>
</div>
</aside>
<!--主界面部分-->
<div class="mui-inner-wrap" style="background: #fff;">
<div id="list" class="mui-content mui-scroll-wrapper" style="background: #fff;">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="ulList">
<li class="mui-table-view-cell">Item 1
<span class="mui-badge mui-badge-primary">11</span>
</li>
<li class="mui-table-view-cell">Item 2
<span class="mui-badge mui-badge-success">22</span>
</li>
<li class="mui-table-view-cell">Item 3
<span class="mui-badge">33</span>
</li>
<li class="mui-table-view-cell">Item 1
<span class="mui-badge mui-badge-primary">11</span>
</li>
<li class="mui-table-view-cell">Item 2
<span class="mui-badge mui-badge-success">22</span>
</li>
<li class="mui-table-view-cell">Item 3
<span class="mui-badge">33</span>
</li>
<li class="mui-table-view-cell">Item 1
<span class="mui-badge mui-badge-primary">11</span>
</li>
<li class="mui-table-view-cell">Item 2
<span class="mui-badge mui-badge-success">22</span>
</li>
<li class="mui-table-view-cell">Item 3
<span class="mui-badge">33</span>
</li>
<li class="mui-table-view-cell">Item 1
<span class="mui-badge mui-badge-primary">11</span>
</li>
<li class="mui-table-view-cell">Item 2
<span class="mui-badge mui-badge-success">22</span>
</li>
<li class="mui-table-view-cell">Item 3
<span class="mui-badge">33</span>
</li>
<li class="mui-table-view-cell">Item 1
<span class="mui-badge mui-badge-primary">11</span>
</li>
<li class="mui-table-view-cell">Item 2
<span class="mui-badge mui-badge-success">22</span>
</li>
<li class="mui-table-view-cell">Item 3
<span class="mui-badge">33</span>
</li>
<li class="mui-table-view-cell">Item 3
<span class="mui-badge">33</span>
</li>
<li class="mui-table-view-cell">Item 1
<span class="mui-badge mui-badge-primary">11</span>
</li>
<li class="mui-table-view-cell">Item 2
<span class="mui-badge mui-badge-success">22</span>
</li>
<li class="mui-table-view-cell">Item 3
<span class="mui-badge">33</span>
</li>
</ul>
</div>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script type="text/javascript" charset="UTF-8">
//列表区域支持滑动
mui("#list").scroll();
</script>
</body>
</html>
-
截图:
7