《iPhone侧滑不兼容-mui》

前言:

       公司项目APP即将投产,在搜索引擎模拟iPhone和Android没有问题,采用人工测试模拟正式投产使用时,发现iPhone不兼容mui的侧滑效果.准确来讲,侧滑栏可以出现,有两个问题: 第一,mui的垂直滑动无效; 第二, mui的点击事件与swipper联动效果无效.为解决此问题,开始了如下的探索,请听小编娓娓道来:

正文:

    一,站在巨人的肩膀上

    公司中的其他项目也遇到过类似的问题,解决方案如下:

• 苹果手机页面不兼容问题——mui:  https://blog.csdn.net/tink_bell/article/details/82191746

    这种方法解决不兼容的思路是: 采用嵌套页面的方式,替换掉mui的垂直滑动,偷梁换柱成iframe标签自身的垂直滑动,也就是原生的.目前本项目的实际情况是,这部分并不是单独一个页面所开发出来的,是某个页面的一部分,如果使用上述方法解决,需要将在梳理现有业务的前提下,重新建立组件,拆分原先的业务开发, 如果时间允许,这也未尝不可,但由于时间紧迫,大概修改这个兼容性问题仅有两天的时间,所以抛弃了此种方案.但也汲取了解决问题的思路.不再现有技术实现上浪费时间,改变现有技术实现,更换技术实现方案,采用原生的垂直滑动效果.观察了本项目前端的项目架构,采用的是Angular框架,同时与第三方组件库primeng集成了.继而从第三方组件库中寻找解决方法,具体解决方案如下:

      二.躬行此事

      采用primeng的组件---Siderbar,同时结合原生的垂直滑动: overflow: auto;更换技术实现方案

 

1.      enter-result.html核心代码修改

 <!-- 点击出现侧滑-------杨晓风-2018-11-11 17:06:34----start -->
      <button type="text" style="height:40px;border: none;background: url('assets/images/nav.png') no-repeat;width: 50px;margin-top: 7px;"
        (click)="visibleSidebar1 = true" pButton icon="pi pi-plus" label="Show"></button>
      <!-- 点击出现侧滑-------杨晓风-2018-11-11 17:06:34----end -->
<!--杨晓风-------------侧滑菜单部分---------------2018-11-11 17:05:51-----start-->
<p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000" id="offCanvasSide">
  <div class="enter_result_A">
    <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;display: none;">关闭侧滑菜单</button>
    <div *ngFor="let student of studentTestInfo ;index as i">
      <ul class="mui-table-view" style="background-color:black">
        <li id="{{i}}" class="mui-table-view-cell" style="padding-top: 0px;padding-bottom: 1px;background-color: rgb(212, 90, 19);">
          <div *ngIf="(student.isLackExam==1)">
            <a class="mui-navigate-right" style="font-weight:normal;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" (click)="skip(student.studentCode)" style="font-weight:normal;font-size: 16px;color: white;">
              {{student.studentCode}} {{student.studentName}}
            </a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</p-sidebar>
<!--杨晓风-------------侧滑菜单部分---------------2018-11-11 17:05:51-----end-->

 

2.  enter-result.css 

/* 杨晓风------侧滑样式-------2018-11-11 17:07:12------------------------start------- */

.enter_result_A {
    overflow: auto;
    height: 100%;
    background-color: black;
    margin-left: -11px;
    margin-top: -100px;
    margin-bottom: -5px;
    width: 235px;
}

.enter_result_A::-webkit-scrollbar {
    width: 1px;
}

.enter_result_A::-webkit-scrollbar-track {
    background-color: gray;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

/* 杨晓风------侧滑样式-------2018-11-11 17:07:12------------------------end------- */

 

 3.enter-result.ts

 

  /**
  * 侧滑点击事件-------start--------------------------------------------------
  * 
  * @author 杨晓风
  * @since 2018-11-10 19:53:05
  */
  visibleSidebar1 = false;
  skip(code) {
    this.visibleSidebar1 = false;
    const swiper = new Swiper('.swiper-container', {
      // direction: 'vertical',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      paginationClickable: true,
      longSwipesRatio: 0.3, //触发swiper所需要的最小拖动距离比例
      touchRatio: 1,  //滑动的拖放的，如果是1表示滑动之后换下一个界面是一整块，如果是0.5就表示才能滑一半。
      observer: true, // 修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, // 修改swiper的父元素时，自动初始化swiper
    });
    const positionParm = this.studentTestInfo.findIndex(a => a.studentCode === code);
    swiper.slideTo(positionParm);
  }
  // 杨晓风------侧滑-----------------------2018-11-11 17:08:33----------------------end----------

 

  至此,本项目中的兼容性问题就完美解决了.

  三.美丽插曲

     1.总体解决问题的思路是:采用primeng的组件---Siderbar,同时结合原生的垂直滑动: overflow: auto;更换技术实现方案,原本技术实现点击事件出现侧滑源码为:

 

<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>

将此源码修改为click事件,让primeng的siderbar出现,代码如下:

<a href="#offCanvasSide" (click)="visibleSidebar1 = true" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>

       你以为问题到此就问完美结束了吗? no !  这下,iPhone兼容是解决了,蓦然回首却发现Android又不行了.可是之前命名已经测试过这种方法的可行性,测试的结果亲眼目睹iPhone和Android都可行,现在居然是眼见的也不一定为实了.进一步查证的问题根源乃是:<a>标签,这样更换技术实现方案之后,a标签的点击事件无法进行了,原以为是a标签中使用mui的class导致的,修改代码如下:

<a ><i class="fa fa-bars" style="font-size: 30px;margin-top: 5px;"></i></a>

 问题依旧,再换方案:

      <button type="text" (click)="visibleSidebar1 = true"style="height:35px;border: none;background-color: #efeff4" (click)="visibleSidebar1 = true" pButton icon="pi pi-plus"
        label="Show"> <a ><i class="fa fa-bars" style="font-size: 30px;margin-top: 5px;"></i></a></button>

问题依旧,抛弃使用a标签和图标的使用,直接使用button,通过定制化button,达到与原来的用户体验度无异,同时兼容了iPhone和Android,最终代码便是躬行此事代码所粘贴的核心代码：

      <!-- 点击出现侧滑-------杨晓风-2018-11-11 17:06:34----start -->
      <button type="text" style="height:40px;border: none;background: url('assets/images/nav.png') no-repeat;width: 50px;margin-top: 7px;"
        (click)="visibleSidebar1 = true" pButton icon="pi pi-plus" label="Show"></button>
      <!-- 点击出现侧滑-------杨晓风-2018-11-11 17:06:34----end -->

最终效果图:

2.iPhone手机上无法输入小数点，源码如下：

<input id="weight" #weight [(ngModel)]="li.weightResult" (focus)="inputResult(li)" (blur)="overBMI(weight.id,li)" type="number" (keyup)='calcBMIScore(li)' placeholder="格式：65" pattern="[0-9]*" oninput="if(value.length>4)value=value.slice(0,4)">
<label>公斤</label>

问题定位：

 pattern="[0-9]*" 问题出在输入框数据检验上，使用此校验方式会由如下问题：

input：

         （1）type = 'number'时， 当输入的为非法数字 例如包括-+等，则在取value的值时判断为非数字就会将value自动置为‘’，
且在ios中number类型不能成功调起数字键盘，需要使用pattern调取数字键盘，但是此时系统键盘没有小数点

         （2）type = 'tel' 调起数字键盘 没有number value为空的问题，同样在ios没有小数点

         （3）type = "text" pattern="[0-9]*" 在安卓无法调取数字键盘 ，在ios能调起数字键盘没有小数点，同时能输入-+/

解决方案：

更换数据校验技术实现方案，目前暂时先去掉 pattern="[0-9]*"的数据校验.

3.iPhone小屏幕,有一个按钮被遮挡住,与样式嵌套有关,每一种组件库都有自己相应的样式定义,那涉及到continer这样的样式又有自己的容器样式,所以环环嵌套,可能会出现相互遮挡和冲突的问题.

结语：the best preparation for tomorrow is doing the best today