swiper插件实现多个页面间满屏切换，且单个页面可滚动

页面间满屏切换，本来想自己写动画，但是实现的动画总是不那么优美，于是使用了swiper插件。
但是这个插件也仅支持满屏的切换，我这边的第二屏页面超级长，所以想要支持第二屏也要单独可滚动，就要自己控制一下啦

 window.onload = function () {
    var swiper = new Swiper('.swiper-container', {
      direction: 'vertical', // 垂直切换选项
      loop: false, // 循环模式选项
      resistanceRatio: 0
    })
    var startScroll
    var touchStart
    var touchCurrent
    swiper.slides.on('touchstart', function (e) {
      startScroll = this.scrollTop
      touchStart = e.targetTouches[0].pageY
    }, true)
    swiper.slides.on('touchmove', function (e) {
      touchCurrent = e.targetTouches[0].pageY
      var touchesDiff = touchCurrent - touchStart
      var slide = this
      var onlyScrolling =
        (slide.scrollHeight - 10 > slide.offsetHeight) &&
        (
          (touchesDiff < 0 && startScroll === 0) ||
          (touchesDiff > 0 && startScroll === (slide.scrollHeight - slide.offsetHeight)) ||
          (startScroll > 0 && startScroll - 50 < (slide.scrollHeight - slide.offsetHeight))
        )
      if (onlyScrolling) {
        e.stopPropagation()
      }
    }, true)
  }

判断

当前页面高度>屏幕高度 &&
用户向下滑动页面 ，且当前滚动高度是0 ||
用户向上滑动页面，且当前滚动高度是页面的底部 ||
用户向上滑动，且当前滚动高度在页面中间

满足以上条件，则阻止事件冒泡，搞定