[dcloudio/mui]mui-scalable的侧滑菜单中遮罩层显示很奇怪(引入mui.css文件异常,引入mui.min.css文件正常)

2023-12-25 377 views
0
遮罩层对list界面遮盖区域异常
  • 引入mui.css文件,遮罩层只能遮盖列表中间部分,第一列和最后一列无法遮盖,但换成mui.min.css文件后显示正常。官方文档中的例子是引入mui.min.css。对于mui.css和mui.min.css呈现的两种不同效果很奇怪。

回答

0

你用的是什么版本的css,请提供问题截图

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>
  • 截图: pic

7

最新版没问题的话,就可以关闭问题了