探索——苹果手机不兼容MUI侧滑下拉内容

        组长委以重任与我，解决苹果手机不兼容MUI的问题，我上网查了一些资料，发现关于这方面的解决方案大致分为两种，一是在HTML代码中，使用iframe 或者其他元素，用div装饰，二是用ionic框架替换MUI框架

         先说说第一种方案的经历

          原始代码：

<!--侧滑菜单部分-->
  <aside id="offCanvasSide" class="mui-off-canvas-left">
    <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
      <div class="mui-scroll">

        <div class="content">

          <p style="margin: 10px 15px;">
            <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;visibility: hidden;">关闭侧滑菜单</button>
          </p>

        </div>
  
          <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
            <ng-container *ngFor='let student of studentTestInfo ;index as i'>
              <li id="{{i}}" class="mui-table-view-cell" *ngIf="student.isLackExam==1" style="background-color: rgb(212, 90, 19)">
               <!-- 缺考后变色 -->
                <div *ngIf="(student.isLackExam==1)">
                  <a class="mui-navigate-right" style="font-size: 16px;color:rgb(239, 248, 247);">
                    {{student.studentCode}} {{student.studentName}}
                  </a>
                </div>
              </li>
  
              <li id="{{i}}" class="mui-table-view-cell" *ngIf="student.isLackExam==0||student.isLackExam==null" style="background-color:black">
                <!-- && 录入成绩了-->
                <div *ngIf="(student.score!=null && student.score!='')">
                  <a class="mui-navigate-right" style="font-size: 16px;color: gray;">
                    {{student.studentCode}} {{student.studentName}}
                  </a>
                </div>
                <!--  暂时未录入成绩-->
                <div *ngIf="(student.score==null||student.score=='')">
                  <a class="mui-navigate-right" style="font-size: 16px;color: white;">
                    {{student.studentCode}} {{student.studentName}}
                  </a>
                </div>
              </li>
            </ng-container>
          </ul>
        </div>
      </div>
    </aside>

修改后

css页面：

.main-iframe-holder {
    margin-top:44px;  /*适应手机端顶部区域*/ 
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}

    .main-iframe-holder iframe {
        height: 100%;
        width: 100%;
    }

html页面：

<!--侧滑菜单部分-->
  <aside id="offCanvasSide" class="mui-off-canvas-left">
    <div class="main-iframe-holder">
      <iframe id="content" frameborder="0" scrolling="auto" 
      style="width: 100%; height: 100%;" src=""></iframe>
  </div>
 
      <div class="mui-scroll">

        <div class="content">

          <p style="margin: 10px 15px;">
            <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;visibility: hidden;">关闭侧滑菜单</button>
          </p>

        </div>
  
          <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
            <ng-container *ngFor='let student of studentTestInfo ;index as i'>
              <li id="{{i}}" class="mui-table-view-cell" *ngIf="student.isLackExam==1" style="background-color: rgb(212, 90, 19)">
               <!-- 缺考后变色 -->
                <div *ngIf="(student.isLackExam==1)">
                  <a class="mui-navigate-right" style="font-size: 16px;color:rgb(239, 248, 247);">
                    {{student.studentCode}} {{student.studentName}}
                  </a>
                </div>
              </li>
  
              <li id="{{i}}" class="mui-table-view-cell" *ngIf="student.isLackExam==0||student.isLackExam==null" style="background-color:black">
                <!-- && 录入成绩了-->
                <div *ngIf="(student.score!=null && student.score!='')">
                  <a class="mui-navigate-right" style="font-size: 16px;color: gray;">
                    {{student.studentCode}} {{student.studentName}}
                  </a>
                </div>
                <!--  暂时未录入成绩-->
                <div *ngIf="(student.score==null||student.score=='')">
                  <a class="mui-navigate-right" style="font-size: 16px;color: white;">
                    {{student.studentCode}} {{student.studentName}}
                  </a>
                </div>
              </li>
            </ng-container>
          </ul>
        </div>
      </div>
    </aside>

-webkit-overflow-scrolling: touch; 属性值就是专为浏览器中溢出(overflow)时需要滚动的元素设计的。 如果没有指定这个属性,当你想滚动iframe时,实际上会导致外层页面的滚动,通过它你就可以对IFRAME的滚动进行控制! 

链接：https://davidwalsh.name/scroll-iframes-ios

可惜并没有实现我想要的效果，尝试失败。

接下来尝试第二项尝试，使用ionic框架，稍后补充。。。。。。