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 muse-ui@3.0.0 -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