合规

src/App.vue

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

src/plugins/slide.js

+var touchstartY;
+var getData = [];
+var pageArr = [
+  [
+    [],
+    []
+  ],//手机门店
+  [
+    [],
+    []
+  ],//家电门店
+  [
+    ["criterion-shop","criterion-showarea","criterion-money","compliance","criterion-allDetails"],
+    []
+  ],//二轮车门店
+]
+export function data(e){
+  console.log(e)
+  getData = e;
+}
+export function touchstart(e){
+    // console.log(e)
+    touchstartY = e.changedTouches[0].clientY;
+  console.log(touchstartY)
+}
+export function touchend(e){
+  // console.log(pageArr[getData[0]][getData[1]][getData[2]])
+  if(e.changedTouches[0].clientY-touchstartY>=50){
+    console.log("下滑");
+    if(getData[2]>0){
+      console.log("上一页")
+      window.location.href = "http://localhost:8080/#/"+pageArr[getData[0]][getData[1]][getData[2]-1]
+    }
+  }else if(touchstartY-e.changedTouches[0].clientY>=50){
+    console.log("上滑");
+    var len = pageArr[getData[0]][getData[1]].length-1;
+    if(getData[2]<len){
+      console.log("下一页")
+      window.location.href = "http://localhost:8080/#/"+pageArr[getData[0]][getData[1]][getData[2]+1]
+    }
+  }
+}

src/router/index.js

           component: () => import('../views/twoCart/high-shop.vue')
       },//二轮车-高产-店外
       {
-          path: '/compliance',
-          name: 'compliance',
-          component: () => import('../views/twoCart/compliance.vue')
-      },//合规
+          path: '/criterion-compliance',
+          name: 'criterion-compliance',
+          component: () => import('../views/twoCart/criterion-compliance.vue')
+      },//二轮车-标准-合规
+
+      {
+          path: '/high-compliance',
+          name: 'high-compliance',
+          component: () => import('../views/twoCart/high-compliance.vue')
+      },//二轮车-高产-合规
       {
           path: '/criterion-allDetails',
           name: 'criterion-allDetails',

src/store/index.js

 				{'店外':'/appliances_high_outside','店内':'','柜台':'','展示区':'/appliances_high_exhibition','收银台':'/appliances_high_pay','合规物料':'/compliance','浏览全部物料':'/allMaterials_appliances_high'},//高产
 			], //家电
 			[
-				{'店外':'/criterion-shop','店内':'','柜台':'','展示区':'/criterion-showarea','收银台':'/criterion-money','合规物料':'/compliance','浏览全部物料':'/criterion-allDetails'},//标准
-				{'店外':'/high-shop','店内':'','柜台':'','展示区':'/high-showarea','收银台':'/high-money','合规物料':'/compliance','浏览全部物料':'/high-allDetails'},//高产
+				{'店外':'/criterion-shop','店内':'','柜台':'','展示区':'/criterion-showarea','收银台':'/criterion-money','合规物料':'/criterion-compliance','浏览全部物料':'/criterion-allDetails'},//标准
+				{'店外':'/high-shop','店内':'','柜台':'','展示区':'/high-showarea','收银台':'/high-money','合规物料':'/high-compliance','浏览全部物料':'/high-allDetails'},//高产
 			], //二轮车
 		]
 	},

src/views/twoCart/compliance.vue

         <img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
         <div class="content">
             <img class="imgWord1" src="../../assets/vehicle/complianceWord1.png" alt="">
-<!--            <img class="imgWord2" src="../../assets/vehicle/imgWord2_2_1.png" alt="">-->
-<!--            <img class="imgWord3" src="../../assets/vehicle/imgWord2_3_1.png" alt="">-->
             <div class="contPic">
                 <img class="bigImg" src="../../assets/vehicle/complianceContImg.png" alt="">
                 <img @click="showMaskfn()" class="imgLeft" src="../../assets/vehicle/complianceClick1.png" alt="">
             </div>
             <img class="imgWord4" src="../../assets/vehicle/complianceWord2.png" alt="">
         </div>
+
         <!-- 弹框 -->
         <div class="maskAll" v-if="showMask">
             <img class="mask1_1" src="../../assets/vehicle/maskCompliance.jpg" alt="">

src/views/twoCart/criterion-allDetails.vue

         return{
 
         }
+      },
+      methods:{
+        scrollFn(){
+          var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+          // console.log(scrollTop)
+          if(scrollTop===0 || scrollTop===document.body.clientHeight){
+            this.$refs.contentAll.addEventListener("touchend",touchend)
+          }
+        }
       }
     }
 </script>

src/views/twoCart/criterion-compliance.vue

+<template>
+    <compliance></compliance>
+</template>
+<script>
+    import compliance from "./compliance"
+      export default {
+        name:"criterionCompliance",
+        components:{compliance}
+      }
+</script>

src/views/twoCart/criterion-money.vue

 <template>
 	<div class="all">
 		<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
-		<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
-		<div class="content">
-			<img class="imgWord1" src="../../assets/vehicle/imgWord1.png" alt="">
-			<img class="imgWord2" src="../../assets/vehicle/imgWord2.png" alt="">
-			<img class="imgWord3" src="../../assets/vehicle/imgWord3.png" alt="">
-			<div class="contPic">
-				<img class="bigImg" src="../../assets/vehicle/contImg1_1.png" alt="">
-				<img @click="showMaskfn(1)" class="imgLeft" src="../../assets/vehicle/click1.png" alt="">
-				<img @click="showMaskfn(2)" class="imgRight" src="../../assets/vehicle/click2.png" alt="">
-				<img class="click1" src="../../assets/pageRedDot.png" alt="">
-				<img class="click2" src="../../assets/pageRedDot.png" alt="">
+<!--		<div ref="contentAll" style="width: 100%;height:100%">-->
+			<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
+			<div class="content">
+				<img class="imgWord1" src="../../assets/vehicle/imgWord1.png" alt="">
+				<img class="imgWord2" src="../../assets/vehicle/imgWord2.png" alt="">
+				<img class="imgWord3" src="../../assets/vehicle/imgWord3.png" alt="">
+				<div class="contPic">
+					<img class="bigImg" src="../../assets/vehicle/contImg1_1.png" alt="">
+					<img @click="showMaskfn(1)" class="imgLeft" src="../../assets/vehicle/click1.png" alt="">
+					<img @click="showMaskfn(2)" class="imgRight" src="../../assets/vehicle/click2.png" alt="">
+					<img class="click1" src="../../assets/pageRedDot.png" alt="">
+					<img class="click2" src="../../assets/pageRedDot.png" alt="">
+				</div>
+				<img class="imgWord4" src="../../assets/vehicle/imgWord4.png" alt="">
 			</div>
-			<img class="imgWord4" src="../../assets/vehicle/imgWord4.png" alt="">
-		</div>
+<!--		</div>-->
+
 		<!-- 弹框 -->
 		<div class="maskAll" v-if="showMask">
 			<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_1.jpg" alt="">
 
 <script>
 	import Sidebar from '../../components/sidebar'
+	// import {data,touchstart,touchend} from '../../plugins/slide'
 	export default{
 		name:"criterionMoney",
 		components:{Sidebar},
 				showMaskNum:null,
 			}
 		},
+		// mounted(){
+		// 	data([2,0,2]);
+		// 	this.$refs.contentAll.addEventListener("touchstart",touchstart)
+		// 	this.$refs.contentAll.addEventListener("touchend",touchend)
+		// },
 		methods:{
 			showMaskfn(e){
 				this.showMask = true;
 				}else{
 					this.showMaskNum = 2;
 				}
-			}
+			},
 		}
 	}
 </script>

src/views/twoCart/criterion-shop.vue

 <template>
-	<div class="all" ref="contentAll">
+	<div class="all">
 		<!-- <img class="showBg" src="../../assets/vehicle/showBg.jpg" alt=""> -->
 		<img class="imgBg" src="../../assets/vehicle/imgBg.jpg" alt="">
 		<div class="content">
 			</div>
 			<img class="imgWord4" src="../../assets/vehicle/imgWord1_3_3.png" alt="">
 		</div>
+
 		<!-- 弹框 -->
 		<div class="maskAll" v-if="showMask">
 			<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_5.jpg" alt="">
 				touchstartY:0,
 			}
 		},
-
-		// mounted(){
-		// 	window.addEventListener("touchstart",this.touchstart)
-		// 	window.addEventListener("touchend",this.touchend)
-		// },
 		methods:{
 			showMaskfn(e){
 				this.showMask = true;
 					this.showMaskNum = 3;
 				}
 			},
-			touchstart(e){
-				this.touchstartY = e.changedTouches[0].clientY;
-			},
-			touchend(e){
-				if(e.changedTouches[0].clientY-this.touchstartY>=50){
-					console.log("下滑")
-				}else if(this.touchstartY-e.changedTouches[0].clientY>=50){
-					console.log("上滑")
-				}
-			},
+			// touchstart(e){
+			// 	this.touchstartY = e.changedTouches[0].clientY;
+			// },
+			// touchend(e){
+			// 	if(e.changedTouches[0].clientY-this.touchstartY>=50){
+			// 		console.log("下滑")
+			// 	}else if(this.touchstartY-e.changedTouches[0].clientY>=50){
+			// 		console.log("上滑")
+			// 		this.$router.push("./criterion-showarea")
+			// 	}
+			// },
 		}
 	}
 </script>

src/views/twoCart/criterion-showarea.vue

 			</div>
 			<img class="imgWord4" src="../../assets/vehicle/imgWord1_2_3.png" alt="">
 		</div>
+
 		<!-- 弹框 -->
 		<div class="maskAll" v-if="showMask">
 			<img v-if="showMaskNum==1" class="mask1_1" src="../../assets/vehicle/mask1_3.jpg" alt="">
 				}else{
 					this.showMaskNum = 2;
 				}
-			}
+			},
+
 		}
 	}
 </script>

src/views/twoCart/high-compliance.vue

+<template>
+    <compliance></compliance>
+</template>
+<script>
+  import compliance from "./compliance"
+  export default {
+    name:"highCompliance",
+    components:{compliance}
+  }
+</script>