位置: IT常识 - 正文

事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)(事件监听处理的实现原理)

编辑:rootadmin
事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)

推荐整理分享事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)(事件监听处理的实现原理),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:事件监听的方法名是,事件监听的处理模型主要包含,事件监听的方法名是,事件监听的方法名是,事件监听的方法名是,事件监听是什么意思,事件监听接口中方法的返回值是,事件监听的方法名是,内容如对您有帮助,希望把文章链接给更多的朋友!

目录

一、效果展示

二、实现步骤

三、涉及要点

1. Vue 语法 v-show

2. 获取窗口到元素顶端的距离

3. 监听事件


一、效果展示

        最近在做项目时有一个网页渲染是这样的,某一个元素在开始不显示,只有当页面滑动到指定的位置时才显示该元素。效果如下:

二、实现步骤

1. 创建元素并设置为固定定位。

2. 首先使用 Vue 中的显示隐藏指令 v-show 将需要操作的元素隐藏;

事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)(事件监听处理的实现原理)

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 获取页面;

这里需要注意:

在没有

本文链接地址:https://www.jiuchutong.com/zhishi/287114.html 转载请保留说明!

上一篇:【项目问题定位】前端请求不到资源报错ERR_CONTENT_LENGTH_MISMATCH的解决(项目中的问题)

下一篇:最奢华的iPhone 4S是什么(最奢华的女士腕表)

  • 纳税申报表申报日期
  • 一般户付款能开增值税票吗
  • 增值税分录及账务处理如何做?
  • 所得税交多了怎么办
  • 企业贷款合同签订后多久放款
  • 税盘没有及时清卡
  • 占地面积的计算公式
  • 成本费用利润率反映什么
  • 小微企业免税销售额和未达起征点销售额
  • 企业年金如何缴费标准
  • 逾期还款银行罚息怎么算
  • 个税登记app
  • 应收票据怎么写
  • 外汇收不到会不会丢
  • 贸易利益怎么计算
  • 个体工商户库存商品入账
  • 油票入什么管理费用科目
  • 发票报账的基本流程
  • 流转税率是什么意思
  • 地下商铺出售产权归属
  • 自然人借款给企业的涉税风险
  • 直接收费金融服务、提供贷款服务和金融商品转让税率
  • 保险公司联合举办活动
  • 进口设备属于货物贸易吗
  • 服务类的公司有哪些
  • 企业营业利润为负的原因有哪些
  • 返利是冲减收入还是计入费用
  • 企业非独立法人是什么意思
  • 无生产怎样结转成本费用
  • 股东退股资金如何返还
  • win10怎么自定义开机音乐
  • 虚拟机vm怎么用
  • 鸿蒙系统怎么隐藏应用图标
  • 协调费用应该怎么表述
  • 个人之间股权转让印花税怎么交
  • 怎么登记总分类账簿
  • PHP:pg_fetch_result()的用法_PostgreSQL函数
  • ntfs文件夹权限高于文件权限
  • 增值税专用发票的税率是多少啊
  • php引用文件的方法
  • 数据库读写异常
  • 浅谈php的数据库管理系统
  • 失业保险金退回告知书
  • 逾期的押金税率是多少
  • 现金盘盈盘亏怎么处理
  • 建立分公司流程
  • 上一年度的费用退回清算表怎么填
  • 红字发票可以跨越开吗
  • mongodb局域网访问
  • 经营性收入包括成本吗
  • sqlserver233报错原因
  • 无形资产租金计入什么科目
  • 简易征收的纳税标准
  • 库存结转成本如何计算
  • 青苗赔偿管理办法
  • 建筑升降机厂家
  • 税审报告一定要税所主任签吗
  • sql server错误和使用情况报告
  • windows service 2003
  • 扩展卷不相邻怎么办
  • 电脑主板bios设置图解
  • windows不能打开此文件result:31
  • win10 20h2 v2
  • linux isolcpus
  • linux小技巧
  • Android游戏开发入门
  • assets怎么编辑
  • shell脚本while true循环
  • 现在最流行的是啥
  • android的handler
  • 详解如何使用pcem安装windows 98 csdn
  • nodejs基础知识
  • 网管系统怎么用
  • powercli命令
  • python中的字符型
  • androidui框架
  • Python实现Sqlite将字段当做索引进行查询的方法
  • 如何证明发货前货物完好
  • 驻马店燃气投诉电话号码
  • 青岛新农合咨询电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设