소스 검색

增加滑动

master
suizhijia 5 년 전
부모
커밋
469138272f
7개의 변경된 파일169개의 추가작업 그리고 56개의 파일을 삭제
  1. +45
    -52
      src/App.vue
  2. +20
    -0
      src/router/index.js
  3. +4
    -4
      src/store/index.js
  4. +25
    -0
      src/views/appliances_high_compliance.vue
  5. +25
    -0
      src/views/appliances_standard_compliance.vue
  6. +25
    -0
      src/views/phone_high_compliance.vue
  7. +25
    -0
      src/views/phone_standard_compliance.vue

+ 45
- 52
src/App.vue 파일 보기

<template> <template>
<div id="app">
<div id="app" @touchstart="startEvent" @touchend="endEvent">
<transition name="fade"> <transition name="fade">
<router-view /> <router-view />
</transition> </transition>
<script> <script>
let allPage = [];//所有可滑动的页面 let allPage = [];//所有可滑动的页面
let stopSliding = [];//仅可向上或向下滑动的页面 let stopSliding = [];//仅可向上或向下滑动的页面
let startPage=[];
let endPage=[];
let siteRecord = 0; let siteRecord = 0;
import BtnMusic from './components/music.vue' import BtnMusic from './components/music.vue'
// import Sidebar from './components/sidebar.vue' // import Sidebar from './components/sidebar.vue'
this.bgAudio.addEventListener('pause', function() { this.bgAudio.addEventListener('pause', function() {
that.bgLoop = false; that.bgLoop = false;
}) })
// this.calculateJumpRules();
this.calculateJumpRules();
}, },
methods: { methods: {
playMusic() { playMusic() {
this.bgAudio.play(); 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("下一页");
// console.log(allPage)
// console.log(path)
// console.log(allPage[allPage.indexOf(path)-1])
// // return;
// this.$router.replace(allPage[allPage.indexOf(path)+1]);
// }else if(siteRecord-_y<-50){
// console.log("上一页");
// this.$router.replace(allPage[allPage.indexOf(path)-1]);
// }
// }
// },
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(){ calculateJumpRules(){
let pagePath = this.$store.state.pagePath; let pagePath = this.$store.state.pagePath;
for(let i=0;i<pagePath.length;i++){ for(let i=0;i<pagePath.length;i++){
} }
stopSliding.push({page:pagePath[i][j]['店外'],direction:"next"}); stopSliding.push({page:pagePath[i][j]['店外'],direction:"next"});
stopSliding.push({page:pagePath[i][j]['浏览全部物料'],direction:"prev"}); stopSliding.push({page:pagePath[i][j]['浏览全部物料'],direction:"prev"});
endPage.push({page:pagePath[i][j]['浏览全部物料'],direction:"prev"});
} }
} }
} }

+ 20
- 0
src/router/index.js 파일 보기

name: 'high-allDetails', name: 'high-allDetails',
component: () => import('../views/twoCart/high-allDetails.vue') component: () => import('../views/twoCart/high-allDetails.vue')
},//二轮车-高产-全部物料 },//二轮车-高产-全部物料
{
path: '/appliances_high_compliance',
name: 'appliances_high_compliance',
component: () => import('../views/appliances_high_compliance.vue')
},//家电-高产-合规物料
{
path: '/appliances_standard_compliance',
name: 'appliances_standard_compliance',
component: () => import('../views/appliances_standard_compliance.vue')
},//家电-标准-合规物料
{
path: '/phone_standard_compliance',
name: 'phone_standard_compliance',
component: () => import('../views/phone_standard_compliance.vue')
},//手机-标准-合规物料
{
path: '/phone_high_compliance',
name: 'phone_high_compliance',
component: () => import('../views/phone_high_compliance.vue')
},//手机-高产-合规物料
] ]


const router = new VueRouter({ const router = new VueRouter({

+ 4
- 4
src/store/index.js 파일 보기

imgBaseUrl: '', imgBaseUrl: '',
pagePath: [ pagePath: [
[ [
{'店外':'/phone_standard_outside','店内':'/phone_standard_within','柜台':'/phone_standard_counter','展示区':'','收银台':'/phone_standard_pay','合规物料':'/compliance','浏览全部物料':'/allMaterials_phone_standard'},//标准
{'店外':'/phone_high_outside','店内':'/phone_high_within','柜台':'/phone_high_counter','展示区':'','收银台':'/phone_high_pay','合规物料':'/compliance','浏览全部物料':'/allMaterials_phone_high'},//高产
{'店外':'/phone_standard_outside','店内':'/phone_standard_within','柜台':'/phone_standard_counter','展示区':'','收银台':'/phone_standard_pay','合规物料':'/phone_standard_compliance','浏览全部物料':'/allMaterials_phone_standard'},//标准
{'店外':'/phone_high_outside','店内':'/phone_high_within','柜台':'/phone_high_counter','展示区':'','收银台':'/phone_high_pay','合规物料':'/phone_high_compliance','浏览全部物料':'/allMaterials_phone_high'},//高产
], //手机店 ], //手机店
[ [
{'店外':'/appliances_standard_outside','店内':'','柜台':'','展示区':'/appliances_standard_exhibition','收银台':'/appliances_standard_pay','合规物料':'/compliance','浏览全部物料':'/allMaterials_appliances_standard'},//标准
{'店外':'/appliances_high_outside','店内':'','柜台':'','展示区':'/appliances_high_exhibition','收银台':'/appliances_high_pay','合规物料':'/compliance','浏览全部物料':'/allMaterials_appliances_high'},//高产
{'店外':'/appliances_standard_outside','店内':'','柜台':'','展示区':'/appliances_standard_exhibition','收银台':'/appliances_standard_pay','合规物料':'/appliances_standard_compliance','浏览全部物料':'/allMaterials_appliances_standard'},//标准
{'店外':'/appliances_high_outside','店内':'','柜台':'','展示区':'/appliances_high_exhibition','收银台':'/appliances_high_pay','合规物料':'/appliances_high_compliance','浏览全部物料':'/allMaterials_appliances_high'},//高产
], //家电 ], //家电
[ [
{'店外':'/criterion-shop','店内':'','柜台':'','展示区':'/criterion-showarea','收银台':'/criterion-money','合规物料':'/criterion-compliance','浏览全部物料':'/criterion-allDetails'},//标准 {'店外':'/criterion-shop','店内':'','柜台':'','展示区':'/criterion-showarea','收银台':'/criterion-money','合规物料':'/criterion-compliance','浏览全部物料':'/criterion-allDetails'},//标准

+ 25
- 0
src/views/appliances_high_compliance.vue 파일 보기

<template>
<compliance></compliance>
</template>
<style scoped>

</style>
<script>
import compliance from './twoCart/compliance'
export default {
name: 'appliances_high_compliance',
props: [],
components: {
compliance
},
data() {
return {}
},
created() {

},
mounted() {

}
}
</script>

+ 25
- 0
src/views/appliances_standard_compliance.vue 파일 보기

<template>
<compliance></compliance>
</template>
<style scoped>

</style>
<script>
import compliance from './twoCart/compliance'
export default {
name: 'appliances_standard_compliance',
props: [],
components: {
compliance
},
data() {
return {}
},
created() {

},
mounted() {

}
}
</script>

+ 25
- 0
src/views/phone_high_compliance.vue 파일 보기

<template>
<compliance></compliance>
</template>
<style scoped>

</style>
<script>
import compliance from './twoCart/compliance'
export default {
name: 'phone_high_compliance',
props: [],
components: {
compliance
},
data() {
return {}
},
created() {

},
mounted() {

}
}
</script>

+ 25
- 0
src/views/phone_standard_compliance.vue 파일 보기

<template>
<compliance></compliance>
</template>
<style scoped>

</style>
<script>
import compliance from './twoCart/compliance'
export default {
name: 'phone_standard_compliance',
props: [],
components: {
compliance
},
data() {
return {}
},
created() {

},
mounted() {

}
}
</script>

Loading…
취소
저장