diff --git a/src/views/anchor.vue b/src/views/anchor.vue index 2fdbdaa..8a04991 100644 --- a/src/views/anchor.vue +++ b/src/views/anchor.vue @@ -1,6 +1,6 @@ @@ -8,87 +8,88 @@ import Index from '@/views/index/index' export default { name: "anchor", - components:{ + 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() { - // 浏览器兼容 - 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; - } - }, - beforeDestroy() { //及时释放 - // 浏览器兼容 - if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) { - document.removeEventListener("DOMMouseScroll", this.scrollFun, false); - } else if (document.addEventListener) { - document.removeEventListener("mousewheel", this.scrollFun, false); - } else if (document.attachEvent) { - document.removeEventListener("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) > 1) { - if (delta > 0 && window.pageYOffset < window.innerHeight) { - // // 向下滚动 - // this.index = 2; - // this.toPage(this.index); - console.log(window.innerHeight + 20); - console.log(window.innerWidth/2) - window.scrollTo({top: window.innerWidth/2, behavior: 'smooth',}) - } else if (delta < 0 && window.pageYOffset <= window.innerHeight+200) { - // // 向上滚动 - window.scrollTo({top: 0, behavior: 'smooth',}) - } - // // 本次翻页结束,记录结束时间,用于下次判断 - 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; - } - } - } } +// 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() { +// // 浏览器兼容 +// 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; +// } +// }, +// beforeDestroy() { //及时释放 +// // 浏览器兼容 +// if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) { +// document.removeEventListener("DOMMouseScroll", this.scrollFun, false); +// } else if (document.addEventListener) { +// document.removeEventListener("mousewheel", this.scrollFun, false); +// } else if (document.attachEvent) { +// document.removeEventListener("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) > 1) { +// if (delta > 0 && window.pageYOffset < window.innerHeight) { +// // // 向下滚动 +// // this.index = 2; +// // this.toPage(this.index); +// console.log(window.innerHeight + 20); +// console.log(window.innerWidth/2) +// window.scrollTo({top: window.innerWidth/2, behavior: 'smooth',}) +// } else if (delta < 0 && window.pageYOffset <= window.innerHeight+200) { +// // // 向上滚动 +// window.scrollTo({top: 0, behavior: 'smooth',}) +// } +// // // 本次翻页结束,记录结束时间,用于下次判断 +// 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; +// } +// } +// } +// }