Pārlūkot izejas kodu

增加页面滑动切换

master
suizhijia pirms 5 gadiem
vecāks
revīzija
2ad0cf971c
1 mainītis faili ar 72 papildinājumiem un 3 dzēšanām
  1. +72
    -3
      src/App.vue

+ 72
- 3
src/App.vue Parādīt failu

@@ -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>

Notiek ielāde…
Atcelt
Saglabāt