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

你可能感兴趣的:(h5)