基本思路：

1）檢測手指滑動方向：獲取手指抬起時的位置，減去手指按下時的位置，得正即為向下滑動了

2）手指抬起后，向對應反向操作改變當前頁的位置

具體代碼如下：

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 class=""></span><span class=""></span><span class=""></span> </div>

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;}

js分為兩塊

第一，設置html標簽的font-size，以便設置rem的基數 （放在頁面頭部）

document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth/10 + "px";

第二，具體的滑動操作代碼

window.onload = function(){var oDiv = document.getElementById("wrap");var aPages = oDiv.getElementsByClassName("pages");var aDots = document.getElementById("dots").getElementsByTagName("span");var winH = window.innerHeight;var tTime = 1;//設置每頁的高度和zindex值for(var i=0; i<aPages.length; i++){aPages[i].style.height = winH + "px";aPages[i].style.zIndex = 1;}aPages[0].style.zIndex = 3;aPages[1].style.zIndex = 2;oDiv.style.height = winH + "px";//手指拖動事件（去除默認動作）document.addEventListener("touchmove",function(e){e.preventDefault();});var YStart = 0;var iNow = 0;//手指按下oDiv.addEventListener("touchstart",function(e){YStart = e.changedTouches[0].clientY;});//手指移動oDiv.addEventListener("touchmove",function(e){disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑負 });//手指離開oDiv.addEventListener("touchend",function(e){disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑負if(Math.abs(disY)>winH/20){ //只有當滑動距離大于了一定值得時候，才執行切換if(disY<0){iNow++;if(iNow>=aDots.length){iNow = 0;}aPages[0].style.transform = "translateY("+ -winH +"px)";doSlide();}else{iNow--;if(iNow<0){iNow = aDots.length-1;}aPages[0].style.transform = "translateY("+ winH +"px)";doSlide("up");}}});function doSlide(upflag){for(var i=0;i<aDots.length;i++){aDots[i].className = "";}aDots[iNow].className = "now";if(upflag){//向上滑aPages[3].style.zIndex = 2;aPages[1].style.zIndex = 1;oDiv.insertBefore(aPages[3],aPages[1]);setTimeout(function(){aPages[1].style.transform = "translateY(0px)";aPages[1].style.zIndex = 2;aPages[0].style.zIndex = 3;},300)}else{setTimeout(function(){aPages[0].style.transform = "translateY(0px)";aPages[0].style.zIndex = 1;aPages[1].style.zIndex = 3;aPages[2].style.zIndex = 2;oDiv.appendChild(aPages[0]);},300)}}}

?

轉載于:https://www.cnblogs.com/chengduxiaoc/p/6551417.html

總結

以上是生活随笔為你收集整理的移动端整屏滑动的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。