11

src/views/anchor.vue

@@ -0,0 +1,99 @@
+<template>
+<div>
+  <Index v-model="change"></Index>
+</div>
+</template>
+
+<script>
+import Index from '@/views/index/index'
+export default {
+  name: "anchor",
+  components:{
+    Index
+  },
+  data() {
+    return {
+      screenWeight: 0,        // 屏幕宽度
+      screenHeight: 0,        // 屏幕高度
+      index: 1,               // 用于判断翻页
+      curIndex: 1,            // 当前页的index
+      startTime: 0,           // 翻屏起始时间
+      endTime: 0,             // 上一次翻屏结束时间
+      nowTop: 0,              // 翻屏后top的位置
+      pageNum: 2,             // 一共有多少页
+      main: Object,
+      obj: Object,
+      page2:Object,
+      change:0,
+    }
+  },
+  mounted() {
+    //this.screenWeight = document.documentElement.clientWidth;
+    //this.screenHeight = document.documentElement.clientHeight;
+    //this.main = document.getElementById("main");
+    //this.page2 = document.getElementById("page2");
+    //this.obj = document.getElementsByTagName("div");
+    //for (let i = 0; i < this.obj.length; i++) {
+    //  if (this.obj[i].className == 'page') {
+    //    this.obj[i].style.height = this.screenHeight + "px";
+    //  }
+    //}
+    //this.pageNum = document.querySelectorAll(".page").length;
+
+    // 浏览器兼容
+    if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
+      document.addEventListener("DOMMouseScroll", this.scrollFun, false);
+    } else if (document.addEventListener) {
+      document.addEventListener("mousewheel", this.scrollFun, false);
+    } else if (document.attachEvent) {
+      document.attachEvent("onmousewheel", this.scrollFun);
+    } else {
+      document.onmousewheel = this.scrollFun;
+    }
+  },
+  methods: {
+    scrollFun(event) {
+      //console.log(this.main,this.page2.offsetTop,this.screenHeight)
+      this.startTime = new Date().getTime();
+      // mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
+      // DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
+      let delta = event.detail || (-event.wheelDelta);
+      console.log(delta)
+      // 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
+      if ((this.startTime - this.endTime) > 1000) {
+        if (delta > 0 && window.pageYOffset < 937) {
+      //    // 向下滚动
+      //    this.index = 2;
+      //    this.toPage(this.index);
+          window.scrollTo({top: 937, behavior: 'smooth',})
+        } else if (delta < 0 && parseInt(this.main.offsetTop) == 0) {
+      //    // 向上滚动
+      //
+      //
+      //
+      //
+      //    this.index = 1;
+      //    this.toPage(this.index);
+        }
+      //  // 本次翻页结束，记录结束时间，用于下次判断
+        this.endTime = new Date().getTime();
+      }
+    },
+    // 翻页
+    toPage(index) {
+      if (index<=0){
+        return
+      }
+      if (index != this.curIndex) {
+        let delta = index - this.curIndex;
+        this.nowTop = this.nowTop - delta * this.screenHeight;
+        this.curIndex = index;
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>