vue移动端开发遇到的那些坑

1. IOS移动端原始输入法问题

IOS原始输入法，中文输入时，没法触发keyup事件，而keyup时对应的enter事件也没法触发css

解决方案：html

将keyup监听替换成值的watch
让使用者安装三方输入法，好比搜狗输入法（不太现实）

2. IOS移动端click事件300ms的延迟响应

移动设备上的web网页是有300ms延迟的，玩玩会形成按钮点击延迟甚至是点击失效。这是因为区分单击事件和双击屏幕缩放的历史缘由形成的,vue

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展现在手机端上，使用了双击缩放(double tap to zoom)的方案，好比你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然能够撑满整个屏幕，可是字体、图片都很小看不清，此时能够快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。
双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。android

缘由就出在浏览器须要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转连接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击连接仍是要双击该部分区域进行缩放操做，因此，捕获第一次单击后，浏览器会先Hold一段时间t，若是在t时间区间里用户未进行下一次点击，则浏览器会作单击跳转连接的处理，若是t时间里用户进行了第二次单击操做，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操做。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。形成的后果用户纯粹单击页面，页面须要过一段时间才响应，给用户慢体验感受，对于web开发者来讲是，页面js捕获click事件的回调函数处理，须要300ms后才生效，也就间接致使影响其余业务逻辑的处理。ios

解决方案：git

fastclick能够解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序为 touchstart –> touchmove –> touchend –> click,也能够经过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题

3. 一些状况下对非可点击元素如(label,span)监听click事件，ios下不会触发，css增长cursor:pointer就搞定了。

4. 移动端input元素聚焦问题

问题出现场景重现：项目须要写一个搜索组件，相关代码以下web

<template>
  <div class="y-search" :style="styles" :clear="clear">
    <form action="#" onsubmit="return false;">
      <input type="search"
        class="y-search-input"
        v-model='model'
        :placeholder="placeholder"
        @input="searchKeyupFn"
        @keyup.enter="searchEnterFn"
        @foucs="searchFocusFn"
        @blur="searchBlurFn"
      />
      <y-icons class="search-icon" name="search" size="14"></y-icons>
    </form>
    <div v-if="showClose" @click="closeFn">
      <y-icons class="close-icon" name='close' size='12'></y-icons>
    </div>
  </div>
</template>

当我进行keyup事件的时候，其对应的enter事件，不能实现失焦功能。而实际项目中须要实现失焦，那么只能经过操做$el节点了。api

解决方案：在对应的enter事件时进行DOM操做浏览器

searchEnterFn (e) {
  document.getElementsByClassName('y-search-input')[0].blur()
  // dosomething yourself
}

5. fixed定位缺陷

ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
解决方案：可用iScroll插件解决这个问题缓存

6. 阻止旋转屏幕时自动调整字体大小

* {
  -webkit-text-size-adjust: none;
}

7. calc的兼容处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc，因此要在以前增长一个保守尺寸：

div {
  width: 95%;
  width: -webkit-calc(100% - 50px);
  width: calc(100% - 50px);
}

8. 在移动端修改难看的点击的高亮效果，iOS和安卓下都有效

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

不过这个方法在如今的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框仍是没有去掉，有待解决！

一个CSS3的属性，加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见，点不着”。IE到11才开始支持，其余浏览器的当前版本基本都支持。详细介绍见这里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

pointer-events: none;

9. IOS下取消input在输入的时候英文首字母的默认大写

<input type="text" autocapitalize="none">

10. 禁止 IOS 弹出各类操做窗口

-webkit-touch-callout: none;

11. 消除transition闪屏问题

/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-transform-style: preserve-3d;
/*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/
-webkit-backface-visibility: hidden;

12. IOS系统中文输入法输入英文时，字母之间可能会出现一个六分之一的空格

解决方案：经过正则去除

this.value = this.value.replace(/\u2006/g, '');

13. 禁止IOS和Android用户选中文字

-webkit-user-select: none;

14. CSS动画页面闪白,动画卡顿

解决方法:
1.尽量地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速

-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

15. input的placeholder会出现文本位置偏上的状况

input 的placeholder会出现文本位置偏上的状况：PC端设置line-height等于height可以对齐，而移动端仍然是偏上，解决是设置line-height：normal

16.input ios端阴影

input{
    -webkit-appearance: none!important;
}

17.ios 背景图position:fixed 绝对定位兼容问题

style="background-image: url('static/image/bg.png');background-size: 100%;background-attachment: fixed; background-position: center top;background-repeat: no-repeat;"

18.vue 下滑滚动 scroll

<div  :style="{'height':getClientHeight}" @scroll="handleSroll" class="firstcont"></div>
export default {
		
		data() {
			return {
             secondlistty:[],
             gitf:false
              }
          },
computed: {
			getClientHeight:function () {
			//屏幕可视区域的高度
			  let clientHeight = document.body.clientHeight-5  + "px"
			  console.log("clientHeight 1=="+clientHeight)
			  
			  console.log("clientHeight 3=="+clientHeight)
			  return clientHeight
			}
		},
methods: {
    handleSroll(e) {
	if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-5 && !this.gitf){
					  if (this.secondlistty.length >= 10) {
						this.litty(this.start);
					  }
					}
			},
     }
}
<style>
    .firstcont {
    overflow-y: scroll;
		-webkit-overflow-scrolling: touch;   /*这句是为了滑动更顺畅*/
		::-webkit-scrollbar {
		    display: none;
		}
  }

</style>

19.阻止事件冒泡:

v-on:click.stop="事件方法（）"

20.基于vue开发的微信公众号ios系统中的一点坑儿

问题描述：input框在页面中下位置时：点击输入框时ios系统输入法将浏览器整个推上去，关闭输入法时整个浏览器仍是在一种被推上去的状态，须要手动下拉下页面将浏览器重置为正常状态。

解决方法：选择全部的input框，对其添加"聚焦"和"失焦"事件监听，"聚焦"时给该单页面添加"paddingBottom"，"失焦"时重置样式，能够自动让浏览器重置为正常状态。


let that = this;
// 解决ios输入框将网页顶起致使其余元素脱离dom流问题
document.querySelectorAll("input").forEach(element => {
    element.addEventListener("focus", function() {
    that.$refs.pagebox.style.paddingBottom = "1px";
  })
  element.addEventListener("blur", function() {
    that.$refs.pagebox.style.paddingBottom = "0";
  })
})

20. 往返缓存问题

点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。
解决方法：

window.onunload = function(){};