561_jiexin/src/App.vue

<template>
	<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 {
		name: 'APP',
		data() {
			return {
				btnAudio: null,
				bgLoop: false,
			}
		},
		components: {
			BtnMusic
		},
		mounted() {
			var that = this;
			this.bgAudio=window['bgAudio'];
			this.bgLoop=window['bgLoop'];
			if(!this.bgLoop){
				this.bgAudio.removeEventListener('play',window['openLoop']);
			}
			this.bgAudio.addEventListener('play', function() {
				that.bgLoop = true;
			})
			this.bgAudio.addEventListener('pause', function() {
				that.bgLoop = false;
			})
			this.calculateJumpRules();
		},
		methods: {
			playMusic() {
				if (this.bgLoop) { //暂停
					this.bgAudio.pause();
				} 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"});
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	html,
	body {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #3f4447;
	}

	body {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	img {
		display: block;
	}

	#app {
		position: relative;
		height: 100%;
		text-align: center;
	}

	.middleContainer {
		position: absolute;
		width: 100%;
		height: calc(1206/750*100vw);
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.showBg {
		position: absolute;
		width: 100%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.fade-enter-active, .fade-leave-active {
		transition: opacity .5s;
	}
	.fade-enter, .fade-leave-to{
		opacity: 0;
	}
</style>