h5 ios 滑动白屏（h5滑动和webview 滑动动作冲突）

h5 ios 滑动白屏（h5滑动和webview 滑动动作冲突）

解决h5页面在ios设备上下拉显示下层白屏 或者 局部下拉触发页面webview下拉 导致局部下拉失效，经过整理，发现了两种可行方案，一种是给整个页面设置position:fixed 另一种是禁止页面touch事件document.body.addEventListener('touchmove', function (e) { if(e._isScroller) return; e.preventDefault(); }, {passive: false});

以上两种方式都可以解决下来空白下显示。

但是如果是页面局部有滚动效果，点击或者滑动外层造成内部滑动是失效，需点击页面滚动区域才能滑动。那么解决办法也是基于上面两个因素，不过要多做一些监听。下面以position:fixed 方法为例（动态给页面赋值浮动去除页面可滑动效果）：

<template><div class="team-activity" :class="{'fixed': fixed}"><p @touchstart="headerTouchStart"@touchmove="headerTouchMove"@touchend="headerTouchEnd">整个背景 或者 其他你滑动会触发页面滑动造成空白的元素</p><a @touchstart="contentTouchStart"@touchmove="contentTouchMove"@touchend="contentTouchEnd">页面滚动区域</a>
</div>
</template>
<script>
data(){return{fixed: false,contentStartY: 0}
},
methods: {headerTouchStart(e) {// 固定元素滑动，浮动起来this.fixed = true},headerTouchMove(e) {// 组织默认事件，防止跳动e.preventDefault();},headerTouchEnd(e) {// 互动结束，浮动解除，防止滚动元素无法滚动this.fixed = false//  this.$refs.a.scroll(0, 0)},contentTouchStart(e) {tStartY = e.changedToches[0].clientY;},contentTouchMove(e) {let endY = e.changedToches[0].clientY;// 获取滚动的距离let diff = endY - tStartY;let scrollTop = $('.container').scrollTop()// 如果拉到顶了还继续往下拉if(diff > 0 && scrollTop <= 0) {this.fixed = true;e.preventDefault();}else if(diff < 0){ // 如果没有拉到顶，则正常滑动内容栏this.fixed = false;}},contentTouchEnd(e) {this.fixed = false;}}
</script>
<style>
.fixed{position: fixed;left: 0;top: 0;}
</style>

这样就可以解决全部问题了，另一个全部禁掉touch方法，这这个思路基本一致，也是监听禁止和放开。