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) {
        this.contentStartY = e.changedToches[0].clientY;
      },
      contentTouchMove(e) {
        let endY = e.changedToches[0].clientY;
        // 获取滚动的距离
        let diff = endY - this.contentStartY;
        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方法，这这个思路基本一致，也是监听禁止和放开。