Vue点击上下滑动滚屏实践
作者：Origin Visual
这段描述概括了如何在页面上顶部绑定点击事件和下滑滑动绑定点击事件的方法,适合前端开发人员参考,强调用户体验与交互设计的重要性
上滑到顶部
绑定点击事件：
<div class="totop">
<a @click="backTop()" size="50" v-show="tabshow" class="btn btn-default"
><span class="fa"></span
></a>
</div>点击事件方法：
data() {
return {
scrollTopNum: "", //页面滚动的高度
tabshow: false, //是否进行某种操作
};
},
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
},
methods: {
handleScroll() {
let top =
document.documentElement.scrollTop ||
document.body.scrollTop ||
window.pageYOffset;
this.scrollTopNum = top;
},
backTop() {
const goToTop = () => window.scrollTo(0, 0);
goToTop();
},
},
//监听距离头部多少显示按钮
watch: {
scrollTopNum: function () {
if (this.scrollTopNum > 50) {
this.tabshow = true;
} else {
this.tabshow = false;
}
},
},下滑滑动
绑定点击事件：
<div class="tobuttom"></div>
<a @click="backButtom()" href="#" rel="external nofollow" class="wangxia">
<span class="xiabai"></span>
</a>点击事件方法：
data() {
return {
scrollButtomNum: "", //页面滚动的高度
};
},
methods: {
handleScroll() {
let Buttom =
document.documentElement.scrollButtom ||
document.body.scrollButtom ||
window.pageYOffset;
this.scrollButtomNum = Buttom;
},
backButtom() {
const goToButtom = () => window.scrollTo(0, 3380);//滚动到页面的位置3380
goToButtom();
},
},
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。