使用js實現微信小頁面翻頁的原理介紹

時間 2019-11-09

標籤使用實現微信頁面翻頁原理介紹欄目 JavaScript 简体版

原文原文鏈接

文中要介紹的內容是四個手機頁面，手指向上或者向下滑動能夠實現翻頁的功能。因爲代碼比較簡短，可能存在許多bug，思路可供你們參考。javascript

1.實現方式介紹：

首先咱們在頁面寫一個div----box，這個div又包含4個div---page1-page4；css

page1到page4每一個div大小和屏幕同樣大。html

首先顯示page1，使用js監聽用戶觸摸事件，當用戶滑動屏幕時，執行css動畫，page1向上移動到出界面，page2向上移動到進入界面。動畫執行完成後，須要使用js將page的屬性-->動畫類去掉，以避免影響其下一步操做。java

2.編寫html代碼以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>WeChatPortPage</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/animation.css"/>
</head>
<body>
	<div class="box">
		<div class="page page1">
		</div>
		<div class="page page2 hidden">
		</div>
		<div class="page page3 hidden">
			
		</div>
		<div class="page page4 hidden">
			
		</div>
		<img src="img/arrow-up.png" class="up"/>
	</div>
	<!--放最下面防止script加載時頁面還沒加載-->
	<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

以上代碼的核心部分就是div部分，其餘的導入css文件和js文件步驟請不要忘記，否則最後是沒有效果的。jquery

3.html編寫完成後，須要首先使用一部分css代碼來設置div大小位置等等信息。

@charset "utf-8";
*{
	/*設置全局內外邊距爲0*/
	padding: 0;
	margin: 0;
}

html,body{
	/*設置頁面body的佔比*/
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.box{
	/*box的大小爲其父標籤body的100%*/
	width: 100%;
	height: 100%;
	overflow: hidden;
}
/*index.js*/

.box .page{
	/*有點冗餘*/
	width: 100%;
	height: 100%;
	/*這一句相當重要*/
	position: absolute;
}
/*page的樣式設置*/
.page1{
	background-color: deepskyblue;
}
.page2{
	background-color: deepskyblue;
}
.page3{
	background-color: coral;
}

.page4{
	background-color: darkgoldenrod;
}

/*用於隱藏 會使用js爲div添加或者去掉此類,所以此類可能會動態的出如今div的屬性中*/
.hidden{
	display: none;
}

4.設置完成這一步以後，再瀏覽器中調試時，按F12調出檢查面板，切換到手機端模式，就能看到第一頁的背景色，這是第一步已經成功了。接下來咱們按照思惟來就是應該實現滑動翻頁了。

首先咱們須要單獨講一講滑動翻頁的設計方式了：web

要實現翻頁，有幾個個技術問題須要解決，第一個是翻頁的動畫須要解決，第二個是什麼時候何因執行動畫，執行完動畫以後的狀態又是什麼：瀏覽器

動畫咱們須要又引入一個css文件來實現。css中實現動畫的技術是[animation]屬性和【transform】屬性，須要使用以前，先百度瞭解其使用方式。app

監聽事件則使用js中的$("#xxx").on([監聽的動做集],[函數])來實現，具體一看代碼即可理解。函數

css中寫一個動畫類翻出，在寫一個動畫類翻入，這樣配合使用就能執行翻頁的動做了。js中當偵測到用戶事件的時候，給page1添加翻出的動畫類，而後給page2添加翻入的動畫類，並執行類（自動執行，不須要用戶說明何時開始何時結束）。當執行完成動做以後，去掉動畫屬性，以避免影響之後的其餘動畫動做。測試

如下即是代碼：

1）animation.css:

@charset "utf-8";
/*當前頁面向上運動*/
.toTop{
	/*animation使用方式  參數1：自定義動畫名  參數二：執行時間  參數三：循環次數，循環爲infinite*/
	animation:totop 2s 1;
	animation-fill-mode: both;
}
/*設置動畫怎麼執行*/
@keyframes totop{
	/*transform爲移動或變換，translateY意爲沿着Y軸移動。*/
	from{ transform: translateY(0);}
	to{transform: translateY(-100%);}
}

/*下一個頁面向上運動*/
.nextTop{
	animation: nextop 2s 1;
	animation-fill-mode: both;
}

@keyframes nextop{
	from{transform: translateY(100%);}
	to{transform: translateY(0);}
}

/*當前頁面向下運動*/
.toBottom{
	animation: tobottom 2s 1;
	animation-fill-mode: both;
}

@keyframes tobottom{
	from{transform: translateY(0);}
	to{transform: translateY(100%);}
}
/*上一個頁面向下運動*/
.nextBottom{
	animation: nextbttom 2s 1;
	animation-fill-mode: both;
}

@keyframes nextbttom{
	from{transform: translateY(-100%);}
	to{transform: translateY(0%);}
}

2).index.js(注意，在導入此js文件前，務必先導入jQuery，如何導jquery請百度)

//總共有多少頁
var count = $(".page").size();
//當前頁下標
var nowPage = 0;
//觸摸屏幕的不一樣狀態的點
var startY, endY, moveY;

$(".page").on("touchstart touchmove touchend", function(e) {
	//關閉瀏覽器默認時事件
	e.preventDefault();
	
	switch(e.type) {
		case "touchstart":
		//獲取觸摸點的Y座標
			startY = e.originalEvent.targetTouches[0].clientY;
			break;
		case "touchmove":
		//獲取觸摸結束點的Y座標
			endY = e.originalEvent.targetTouches[0].clientY;
			break;
		case "touchend":
		//若是隻是點擊事件，則不進行翻頁
			if(endY==true){
				return;
			}
		//判斷手指滑動的方向
			moveY = endY - startY;
			//向上翻頁，進入下一頁
			if(moveY < 0) {
				//當滑動到最後一頁，返回
				if(nowPage == count - 1) return;
				//當前頁面向上移動，下一個頁面去掉隱藏，而且添加一個向上運動的動畫
				$(this).addClass("toTop").next().removeClass("hidden").addClass("nextTop");
				//當切頁動畫結束後，移除多餘的class屬性
				$(this).on("webkitAnimationEnd", function() {
					//移除多餘的屬性
						$(this).removeClass("toTop").addClass("hidden").next().removeClass("nextTop");
						$(this).off("webkitAnimationEnd");
					})
					//更新nowPage
				nowPage++;
//				向下翻頁，進入上一頁
			endY=true;
			}else if(moveY>0){
				if(nowPage==0){
					return;
				}
				//prev:上一個頁面
				$(this).addClass("toBottom").prev().removeClass("hidden").addClass("nextBottom");
				$(this).on("webkitAnimationEnd",function(){
					//移除多餘的屬性
					$(this).removeClass("toBottom").addClass("hidden").prev().removeClass("nextBottom");
					//解除監聽事件
					$(this).off("webkitAnimationEnd");
				});
				nowPage--;
				endY=true;
			}
			
	}
});

以上就是所有代碼了。以上代碼是使用hbuilder寫出來的，經測試沒有任何問題。讀者如果想驗證其正確性，請在hbuilder下按照此方式放入文件並複製代碼：

首先在hbuilder中新建移動app項目，而後，