移动端全屏滑动效果JS实现代码解析

"这个示例代码展示了如何使用JavaScript在移动端实现整屏滑动的效果，通过检测用户的手指滑动方向并相应地改变页面位置。" 在移动设备上创建一个可滑动的多屏展示通常涉及到触摸事件的处理和CSS动画。在这个实例中，主要使用了JavaScript和CSS来实现这一功能。首先，我们来看一下HTML结构，它包含四个带有`pages`类的`div`元素，分别代表四屏内容，还有一个用于指示当前屏幕的`dots`元素。 ```html <div id="wrap"> <div id="page01" class="pages">第一屏</div> <div id="page02" class="pages">第二屏</div> <div id="page03" class="pages">第三屏</div> <div id="page04" class="pages">第四屏</div> </div> <div id="dots"> <span class="now"></span> <span></span> <span></span> <span></span> </div> ``` CSS部分主要用于设置页面的基本样式，隐藏滚动条，设置页面宽度，并为滑动效果添加过渡动画： ```css * { margin: 0; padding: 0; } body { overflow: hidden; } #wrap > div { width: 10rem; position: absolute; left: 0; top: 0; background: #fff; transition: all 0.3s ease; } #dots { position: fixed; right: 5px; top: 40%; z-index: 9; } #dots span { display: block; height: 0.2rem; width: 0.2rem; border: 1px solid #000; border-radius: 50%; margin-bottom: 3px; } #dots .now { background: #555; } ``` JavaScript部分负责监听触摸事件，计算滑动方向，并更新页面位置及小圆点的状态。首先，为了适配不同设备的屏幕大小，设置了HTML的`font-size`作为rem单位的基础值： ```javascript document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth / 10 + "px"; ``` 然后，在页面加载完成后，获取到`wrap`元素和所有`pages`元素，并初始化当前屏幕为第一个： ```javascript window.onload = function() { var oDiv = document.getElementById("wrap"); var aPages = oDiv.getElementsByClassName("pages"); // 假设初始屏幕为第一页 var currentIndex = 0; // ...其他代码... }; ``` 接下来，我们需要监听`touchstart`、`touchmove`和`touchend`事件： - `touchstart`事件记录手指按下的位置。 - `touchmove`事件用来实时更新滑动距离，但不进行实际的页面切换。 - `touchend`事件则判断滑动方向，如果达到一定的阈值，则切换到下一页或上一页，并更新指示小圆点的状态。 以下是简化的事件处理逻辑： ```javascript // 触摸开始 document.addEventListener('touchstart', function(event) { startX = event.touches[0].clientX; }); // 触摸移动 document.addEventListener('touchmove', function(event) { moveX = event.touches[0].clientX; }); // 触摸结束 document.addEventListener('touchend', function(event) { var distance = moveX - startX; if (Math.abs(distance) > SWIPE_THRESHOLD) { // SWIPE_THRESHOLD是设定的滑动阈值 if (distance > 0) { // 向右滑动，切换到下一页 currentIndex++; if (currentIndex >= aPages.length) { currentIndex = 0; } } else { // 向左滑动，切换到上一页 currentIndex--; if (currentIndex < 0) { currentIndex = aPages.length - 1; } } updatePagePosition(aPages, currentIndex); updateDots(currentIndex); } }); ``` `updatePagePosition`函数会根据当前索引调整每个页面的位置，确保当前屏幕位于正确的位置。`updateDots`则会改变指示小圆点的背景色，表示当前显示的是哪一屏。 这个简单的示例为我们提供了一个基础的移动端滑动页面的实现方式。在实际应用中，可能还需要考虑更多细节，比如防止快速滑动时的误触、处理边界情况、优化性能等。同时，可以使用现成的库如Swiper.js来更高效地实现类似的功能，它们通常提供了更多的定制选项和更好的兼容性。