整理一下小程序以及H5中常见的问题

整理一下小程序以及H5中常见的问题

1.ios/Android 移动端滚透的问题

解决方案
1.在小程序里面一般滚动组件使用的scroll-view 我们只需要在打开遮罩层的时候给最外层view添加一个nowarp标签关闭时移除就可以了！

.nowarp{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:0
}

2.当弹窗内无滚动的时候 遮罩的view上添加一个防止冒泡的方法

//遮罩层上加
catchtouchmove="preventD"

//方法中加
methods:preventD(){
	return
}

2.移动端ios中input聚焦不灵敏（需多次点击）

解决方案（原文链接https://www.jianshu.com/p/053454429e0d）
1.检查是否使用了FastClick，如果使用了在main.js中加

FastClick.attach(document.body);
FastClick.prototype.focus = function (targetElement) {
  let length;
  if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
    length = targetElement.value.length;
    targetElement.focus();
    targetElement.setSelectionRange(length, length);
  } else {
    targetElement.focus();
  }
}

我遇到的是第二种情况！！！
2.App.vue中设置了-webkit-user-select:none影响了input,添加以下代码即可解决

*:not(input,textarea), *:before:not(input,textarea), *:after:not(input,textarea) {
    -webkit-user-select: none; 
  }

3.H5中使用了vux popup组件Mask遮罩层在最上层的问题

首先应用场景是我们公司加了顶象验证码来防止短信攻击，顶象的弹窗被popup组件的Mask遮盖导致无法验证通过无法获取验证码
解决方案
1.node_modules目录下vux相关文件中

node_modules/vux/src/components/popup/popup.js

2.找到document.body.appendChild(this.divMask)

	//换成
	document.querySelector('.vux-popup-dialog').after(this.divMask)

本地成功说明方向是对的但是不可能修改源码（代价太大）所以有了下面的方案

3.查看是否全局设置-webkit-overflow-scorlling:touch;有的话去掉就能解决问题了
（去掉popup组件的祖先DOM节点的这个属性）

以后遇到问题在补上去希望对你有所帮助，欢迎讨论交流。