H5開發問題，用到vant

一、IOS

1.滾動穿透問題

在自己設定左右兩側滾動時，有時IOS開啟了本身的滾動，有時上層觸摸到下層的滾動此時讓IOS寫一個方法可自由開啟或者關閉滾動

對應的會出現滑動位置無法設定問題，此時調用ios本身滾動位置，去除h5滾動位置

2.vant在低版本IOS手機中日期選擇器（van-datetime-picker）無法拉動問題

主要在IOS11以下出現的問題，微信中有部分也出現類似問題

參考：https://github.com/youzan/vant/issues/2865

https://youzan.github.io/vant/#/zh-CN/datetime-picker

處理方案添加樣式

.van-picker-column{
      position: relative;
      z-index: 1;
      &:before{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
      }
      &>ul{
        z-index: -1;
        position: relative;
      }
    }
           

這樣處理下基本可以，其中由于個人導緻另外一個問題出現

原因參考：

<van-popup v-model="show" position="bottom">
   <van-datetime-picker
      v-model="currentDate"
      type="date"
      :min-date='new Date()'
      @cancel='onCancel'
      @confirm='onSureDate'
      v-if='disChoose'
    />
    <van-datetime-picker
      v-model="currentDate"
      type="date"
      v-else
      @cancel='onCancel'
      @confirm='onSureDate'
    />
</van-popup>
其中就是new Date()這個指派，每次滑動都重新擷取指派，導緻多次快速滑動出現卡頓，這個頁面無法,直接在頁面進來的時候指派
即： :min-data = 'minData'
mounted() {
	this.minData = new Date()
}

           

3.input框設定disabled時字型顯示很模糊

ios的disbaled為0.3，是以樣式設定opacity: 1;

.van-field__control:disabled {
  color: #969799 !important;
  -webkit-text-fill-color: #969799;
  -webkit-opacity: 1;
  opacity: 1;
}
           

二、Android安卓

1.font-weight不生效問題

font-weight: 600 // 不生效
font-weight: bold // 生效
           

2.有時input輸入框被覆寫問題

• scrollIntoView(alignWithTop) ，alignWithTop為true時與目前可視區域頂部對其，false與底部對其，預設true

• scrollIntoViewIfNeeded(alignCenter) 隻在目前元素在視窗的可見範圍内不可見的情況下，才滾動浏覽器視窗或容器元素，最終讓目前元素可見。如果目前元素在視窗中可見，這個方法不做任何處理。如果将可選參數alignCenter設定為true，則表示盡量将元素顯示在視窗中部（垂直方向）------Safari、Chrome實作了這個方法

  更多的參考：https://www.cnblogs.com/mopagunda/p/4899389.html

<van-field
	v-model="value.numbers"
	:type='inputType'
	@focus="onFoucus "
	:maxlength='6'
	@input='InputField($event, value, key)'
	style='vertical-align: middle;'
/>
           

// 監聽手機型号，判斷是否安卓，是的話才進入函數處理，vant的擷取焦點時調用
onFoucus (e) {
   if (this.isIOS) {
     return
   }
   setTimeout(() => {
       e.target.scrollIntoView(false)
       e.target.scrollIntoViewIfNeeded()
   }, 200)
 }
           

多次點選input輸入框依舊會觸發這種情況，故而将focus事件轉換成click事件

<van-field
	v-model="value.numbers"
	:type='inputType'
	@click="onClick "
	:maxlength='6'
	@input='InputField($event, value, key)'
	style='vertical-align: middle;'
/>
           

onClick (e) {
  if (this.isIOS) {
    return
  }
  this.timer && clearTimeout(this.timer)
  // 防抖處理
  this.timer = setTimeout(() => {
    e.path[0].scrollIntoViewIfNeeded()
  }, 500)
}
           

不相容問題

由于使用了muse-ui，經排查主要是muse-ui版本問題，安裝了3.0.2版本

處理：

移除依賴：npm uninstall muse-ui

指定版本，重新安裝：npm install [email protected] -s

問題檢視：https://github.com/youzan/vant/issues/3015

樣式轉換

npm install px2rem-loader --save-dev

npm i lib-flexible --save

詳情參看：

https://blog.csdn.net/weixin_42941619/article/details/87356942