页面间满屏切换，本来想自己写动画，但是实现的动画总是不那么优美，于是使用了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 ||
用户向上滑动页面，且当前滚动高度是页面的底部 ||
用户向上滑动，且当前滚动高度在页面中间
