odjbin/sist_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dengjie commit : header区,新闻中心区部分修改样式

Browse Source
This commit is contained in:
clay
2022-10-04 15:51:38 +08:00
parent 6de202b5a7
commit 7ab4a674f0
3 changed files with 171 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/views/anchor.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<Index v-model="change"></Index>
<Index/>
</div>
</template>
@@ -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;
// }
// }
// }
// }
</script>
<style scoped>