位置: IT常识 - 正文
推荐整理分享事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)(事件监听处理的实现原理),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:事件监听的方法名是,事件监听的处理模型主要包含,事件监听的方法名是,事件监听的方法名是,事件监听的方法名是,事件监听是什么意思,事件监听接口中方法的返回值是,事件监听的方法名是,内容如对您有帮助,希望把文章链接给更多的朋友!
目录
一、效果展示
二、实现步骤
三、涉及要点
1. Vue 语法 v-show
2. 获取窗口到元素顶端的距离
3. 监听事件
最近在做项目时有一个网页渲染是这样的,某一个元素在开始不显示,只有当页面滑动到指定的位置时才显示该元素。效果如下:
二、实现步骤1. 创建元素并设置为固定定位。
2. 首先使用 Vue 中的显示隐藏指令 v-show 将需要操作的元素隐藏;
3. methods 中创建监听窗口滚动方法,通过判断元素最顶端与页面最顶端的距离决定是否显示;
//监听窗口滚动windowScrollListener() { //获取操作元素最顶端到页面顶端的垂直距离 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; if (scrollTop >= 480) { this.isVisable = true; //大于480时显示元素 } if (scrollTop < 480) { this.isVisable = false; //小于480时隐藏元素 }}4. 创建阶段 created 中绑定监听事件进行监听;
created() { //添加滚动监听事件 //在窗口滚动时调用监听窗口滚动方法 window.addEventListener('scroll', this.windowScrollListener);},5. 销毁阶段 destory 中删除监听事件,离开页面时删除,以保证它不会影响其他页。
destroyed() { //离开页面时删除该监听 window.removeEventListener('scroll', this.windowScrollListener)}三、涉及要点1. Vue 语法 v-show<元素 v-show="true/false">专门控制一个元素显示隐藏的特殊指令,用程序控制一个元素的显示或隐藏时。当 new Vue() 扫描到 v-show,就会先计算 = 右边的判断条件的值,如果 = 右边的判断条件值为 true,则当前元素默认正常显示,如果=右边的判断条件值为 false,则 v-show 自动被翻译为 display:none,当前元素隐藏且不占位。
2. 获取窗口到元素顶端的距离首先需要获取页面滚动的垂直距离。第一步就是获取浏览器的可视区域(在浏览器中能看到页面的区域)。
(1)先使用 document.documentElement 获取页面;
这里需要注意:
在没有
上一篇:【项目问题定位】前端请求不到资源报错ERR_CONTENT_LENGTH_MISMATCH的解决(项目中的问题)
下一篇:最奢华的iPhone 4S是什么(最奢华的女士腕表)
友情链接: 武汉网站建设