大佬教程收集整理的这篇文章主要介绍了移动端全屏滑动，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px' </script> <style> body { margin: 0; font-size: 5rem; } html, body, #app { height: 100%; } .slider-container { position: relative; height: 100%; width: 100%; overflow: hidden; } .scroll-wrapper { height: 100%; width: 400%; display: flex; position: absolute; } .slider-item { height: 100%; width: 25%; } .inner { height: 100%; display: flex; justify-content: center; align-items: center; } .slider-item:nth-child(1) { background: cornflowerblue; } .slider-item:nth-child(2) { background: chocolate; } .slider-item:nth-child(3) { background: antiquewhite; } .slider-item:nth-child(4) { background: chartreuse; } </style> </head> <body> <div id="app"> <div class="slider-container"> <div class="scroll-wrapper"> <div class="slider-item"> <div class="inner">PAGE-1</div> </div> <div class="slider-item"> <div class="inner">PAGE-2</div> </div> <div class="slider-item"> <div class="inner">PAGE-3</div> </div> <div class="slider-item"> <div class="inner">PAGE-4</div> </div> </div> </div> </div> </body> <script> let sliderContainer = document.querySelector('.slider-container'), scrollWrapper = document.querySelector('.scroll-wrapper'), oldSliderItems = sliderContainer.querySelectorAll('.slider-item'), innerWidth = document.documentElement.clientWidth let startX = 0, moveX = 0, distance = 0, pageIndex = 0, isMove = false const init = () => { bindEvent() } function bindEvent() { scrollWrapper.addEventListener('touchstart', handleTouchStart) scrollWrapper.addEventListener('touchmove', handleTouchMove) scrollWrapper.addEventListener('touchend', handleTouchEnd) } function handleTouchStart(e) { startX = e.touches[0].clientX } function handleTouchMove(e) { moveX = e.touches[0].clientX if ((moveX < startX && pageIndex === oldSliderItems.length - 1) || (moveX > startX && pageIndex === 0)) { return } distance = moveX - startX setTranslateX(-innerWidth * pageIndex + distance) isMove = true } function handleTouchEnd(e) { if (isMove) { if (Math.abs(distance) >= innerWidth / 3) { if (distance > 0) { pageIndex-- } if (distance < 0) { pageIndex++ } } setTranslateX(-innerWidth * pageIndex) } // 还原状态 startX = 0 distance = 0 isMove = false } function setTranslateX(tranX) { scrollWrapper.style.transition = 'all .1s' scrollWrapper.style.transform = `translateX(${tranX}px)` } init() </script> </html>
以上是大佬教程为你收集整理的移动端全屏滑动全部内容，希望文章能够帮你解决移动端全屏滑动所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。