增加页面滑动切换

src/App.vue

@@ -1,11 +1,16 @@
 <template>
-	<div id="app">
-		<router-view />
+	<div id="app"  @touchstart="startEvent" @touchend="endEvent">
+		<transition name="fade">
+			<router-view />
+		</transition>
 		<btn-music :bgLoop="bgLoop"></btn-music>
 		<!-- <sidebar style="position: absolute;top: 20vw;left: 10vw;"></sidebar> -->
 	</div>
 </template>
 <script>
+	let allPage = [];//所有可滑动的页面
+	let stopSliding = [];//仅可向上或向下滑动的页面
+	let siteRecord = 0;
 	import BtnMusic from './components/music.vue'
 	// import Sidebar from './components/sidebar.vue'
 	export default {
@@ -22,7 +27,7 @@
 		mounted() {
 			var that = this;
 			this.bgAudio=window['bgAudio'];
-			this.bgLoop=window['bgLoop']
+			this.bgLoop=window['bgLoop'];
 			if(!this.bgLoop){
 				this.bgAudio.removeEventListener('play',window['openLoop']);
 			}
@@ -32,6 +37,7 @@
 			this.bgAudio.addEventListener('pause', function() {
 				that.bgLoop = false;
 			})
+			this.calculateJumpRules();
 		},
 		methods: {
 			playMusic() {
@@ -40,6 +46,63 @@
 				} else { //播放
 					this.bgAudio.play();
 				}
+			},
+			startEvent(e){
+				siteRecord=0;
+				var _y= e.changedTouches[0].clientY;
+				siteRecord=_y;
+				var type = e.target.dataset.type;
+			},
+			endEvent(e){//抬起事件
+				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+				let direction = "";//可滑动的方向
+				//获取当前页面路径
+				let path = this.$route.path;
+				//判断是否在可滑动切换页面的列表中
+				if(allPage.indexOf(path)==-1 || scrollTop){
+					return;
+				}
+				//判断是否只可向一个方向滑动
+				for(let i=0;i<stopSliding.length;i++){
+					if(stopSliding[i]["page"]==path){
+						direction = stopSliding[i]['direction'];
+						break;
+					}
+				}
+				var _y= e.changedTouches[0].clientY;
+				if(direction=="next"){
+					if(siteRecord-_y>=50){
+						console.log("只能换到下一页");
+						this.$router.replace(allPage[allPage.indexOf(path)+1]);
+					}
+				}else if(direction=="prev"){
+					if(siteRecord-_y<-50){
+						console.log("只能换到上一页");
+						this.$router.replace(allPage[allPage.indexOf(path)-1]);
+					}
+				}else{
+					if(siteRecord-_y>=50){
+						console.log("下一页");
+						this.$router.replace(allPage[allPage.indexOf(path)+1]);
+					}else if(siteRecord-_y<-50){
+						console.log("上一页");
+						this.$router.replace(allPage[allPage.indexOf(path)-1]);
+					}
+				}
+			},
+			calculateJumpRules(){
+				let pagePath = this.$store.state.pagePath;
+				for(let i=0;i<pagePath.length;i++){
+					for(let j=0;j<pagePath[i].length;j++){
+						for(let key in pagePath[i][j]){
+							if(pagePath[i][j][key]){
+								allPage.push(pagePath[i][j][key]);
+							}
+						}
+						stopSliding.push({page:pagePath[i][j]['店外'],direction:"next"});
+						stopSliding.push({page:pagePath[i][j]['浏览全部物料'],direction:"prev"});
+					}
+				}
 			}
 		}
 	}
@@ -94,4 +157,10 @@
 		top: 50%;
 		transform: translate(-50%, -50%);
 	}
+	.fade-enter-active, .fade-leave-active {
+		transition: opacity .5s;
+	}
+	.fade-enter, .fade-leave-to{
+		opacity: 0;
+	}
 </style>