《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