移動端切換屏幕以及css實現頁面內滑動

最近被分到了手機端做任務，需求是在原頁面上加上tab滑動切換，由於之前沒有做過手機端的任務心裏還是有點慌慌的，於是提前先去度了一下相關的知識點，然後自己整理了一下，以備以後再次用到。

• 通過事件touchstart和touchend來判斷左滑還是右滑

<div style="width: 100%;height: 3000px;background: #aaa;" id="main"> 
   內容區域
 </div>
 <script>
 	(function(){
        var startx;
        var endx;  
        var el = document.getElementById('main');//觸摸區域。  
        function judge() { 
        	console.log(startx,endx);  
            if (startx > endx) {  //判斷左右移動程序  
                console.log("left");  
            } else {  
                 console.log("right");  
            }  
        }  
        el.addEventListener('touchstart', function (e) {  
            var touch = e.changedTouches;  
            startx = touch[0].clientX;  
            starty = touch[0].clientY;  
        });  
        el.addEventListener('touchend', function (e) {  
            var touch = e.changedTouches;  
            endx = touch[0].clientX;  
            endy = touch[0].clientY;  
            judge();  
        });  
    })(); 
</script>
	 

這塊主要是通過手指點擊時獲取手指觸摸屏幕和離開屏幕時接觸點距屏幕左邊的距離來判斷，同樣也可以通過starty和endy的值來判斷手指是向下滑動還是向上滑動

• 通過css實現頁面內的滑動效果
  僅通過css的屬性實現移動端手機屏幕上的滑動效果，具體實現的代碼如下：

<style type="text/css">
   .slide-box{
        margin-top: 200px;
        display: -webkit-box;
        -webkit-overflow-scrolling:touch;
        overflow: auto;
    }
    .slide-item{
        width: 200px;
        height: 200px;
        border:1px solid #000;
        margin-right: 30px;
    }
    ::-webkit-scrollbar{
        display: none;
    }
</style>
<div class="slide-box">
   <div class="slide-item">item1</div>
   <div class="slide-item">item2</div>
   <div class="slide-item">item3</div>
   <div class="slide-item">item4</div>
   <div class="slide-item">item5</div>
</div>

首先需要一個父容器，這塊不用去設置父容器的寬度就默認展示的寬度是屏幕的寬度，重要的css屬性就是display: -webkit-box;然後在每個子容器中設置需要展示的子容器的大小樣式，注會的屬性

::-webkit-scrollbar{
    display: none;
}

是爲了實現手機端滑動時出現的滾動條，同樣你也可以不去設置這個屬性，只是在滑動的時候會展示一個滑動條，這個就視情況而定了。