頁面間滿屏切換，本來想自己寫動畫奇适，但是實現(xiàn)的動畫總是不那么優(yōu)美坟比，于是使用了swiper插件。
但是這個插件也僅支持滿屏的切換嚷往，我這邊的第二屏頁面超級長葛账，所以想要支持第二屏也要單獨可滾動，就要自己控制一下啦
window.onload = function () {
var swiper = new Swiper('.swiper-container', {
direction: 'vertical', // 垂直切換選項
loop: false, // 循環(huán)模式選項
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)
}
判斷
當(dāng)前頁面高度>屏幕高度 &&
用戶向下滑動頁面 皮仁，且當(dāng)前滾動高度是0 ||
用戶向上滑動頁面注竿，且當(dāng)前滾動高度是頁面的底部 ||
用戶向上滑動，且當(dāng)前滾動高度在頁面中間
