位置: 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是什么(最奢华的女士腕表)

  • 盘点QQ群推广常用的招数(qq群精准推广)

    盘点QQ群推广常用的招数(qq群精准推广)

  • emui11支持哪些机型呢(emui11支持哪些机型芯片)

    emui11支持哪些机型呢(emui11支持哪些机型芯片)

  • 用按钮调整是什么意思(改变按钮形状)

    用按钮调整是什么意思(改变按钮形状)

  • 摄影师后期用ps还是lr呢(摄影师专用ps软件)

    摄影师后期用ps还是lr呢(摄影师专用ps软件)

  • 微信头像黑了是怎么了(微信头像黑了是被拉黑了吗)

    微信头像黑了是怎么了(微信头像黑了是被拉黑了吗)

  • 华为热点精选怎么关闭(华为手机热点推荐怎么关闭)

    华为热点精选怎么关闭(华为手机热点推荐怎么关闭)

  • b-e8电池是什么手机型号(be8电池是什么型号?)

    b-e8电池是什么手机型号(be8电池是什么型号?)

  • 钉钉能两个手机同时登录吗(钉钉能两个手机登一个号吗)

    钉钉能两个手机同时登录吗(钉钉能两个手机登一个号吗)

  • 用户ld是什么意思(用户 id)

    用户ld是什么意思(用户 id)

  • 微信头像能设置动态图吗(微信头像能设置成圆的吗)

    微信头像能设置动态图吗(微信头像能设置成圆的吗)

  • 软件更新不了怎么办(软件没办法更新)

    软件更新不了怎么办(软件没办法更新)

  • 苹果手机如何开2个微信(苹果手机如何开启定位功能)

    苹果手机如何开2个微信(苹果手机如何开启定位功能)

  • 苹果手机摔出绿色条纹(苹果手机摔出绿线还能用多久)

    苹果手机摔出绿色条纹(苹果手机摔出绿线还能用多久)

  • ipad pro 12.9一代和二代区别(ipad pro12.9一代充电功率)

    ipad pro 12.9一代和二代区别(ipad pro12.9一代充电功率)

  • 电脑上怎么下载快手(电脑上怎么下载软件)

    电脑上怎么下载快手(电脑上怎么下载软件)

  • 怎么关闭自己的朋友圈只看别人的(怎么关闭自己的朋友圈,但是能看到别人的)

    怎么关闭自己的朋友圈只看别人的(怎么关闭自己的朋友圈,但是能看到别人的)

  • 扣扣显示手机在线是什么意思(扣扣显示手机在线4g是什么意思)

    扣扣显示手机在线是什么意思(扣扣显示手机在线4g是什么意思)

  • 什么是云存储空间(云存储空间是干什么的)

    什么是云存储空间(云存储空间是干什么的)

  • 乐视手机流量不能用怎么办(乐视手机设置显示流量)

    乐视手机流量不能用怎么办(乐视手机设置显示流量)

  • 微信投票为什么投不了(微信投票为什么突然多很多票)

    微信投票为什么投不了(微信投票为什么突然多很多票)

  • 手机出现hd怎么关闭(手机出现hd怎么原因)

    手机出现hd怎么关闭(手机出现hd怎么原因)

  • excel表格怎么换行写字(excel表格怎么换位置)

    excel表格怎么换行写字(excel表格怎么换位置)

  • 支付宝账户怎么修改(支付宝账户怎么注销)

    支付宝账户怎么修改(支付宝账户怎么注销)

  • xr3dtouch怎么设置

    xr3dtouch怎么设置

  • 手机互传在哪里(oppo手机互传在哪里)

    手机互传在哪里(oppo手机互传在哪里)

  • 如何删除QQ音乐登录记录(如何删除QQ音乐心悦卡)

    如何删除QQ音乐登录记录(如何删除QQ音乐心悦卡)

  • 华为手机能扫描吗(华为手机能扫描身份证吗)

    华为手机能扫描吗(华为手机能扫描身份证吗)

  • 中国手机为什么不用北斗卫星(中国手机为什么不能用谷歌)

    中国手机为什么不用北斗卫星(中国手机为什么不能用谷歌)

  • 公转私做账麻烦吗
  • 分公司产生的费用怎么报销
  • 外经证办好了后怎么开票
  • 旅游大巴怎么计费的
  • 税控盘锁死日期查询
  • 残保金什么样的企业要交
  • 进项税加计扣除账务处理
  • 保险中介的保险可以买吗
  • 个人劳务发票怎么交税
  • 增值税代开扣款怎么报税?
  • 2021年洗车是不是免增值税
  • 查账征收的个体户需要申报个人所得税吗
  • 油票发票可以抵进项税吗
  • 股息红利是否交个人所得税
  • 给别人代付
  • 营业外支出汇算清缴调增填哪
  • 双软企业两免三减半企业所得税优惠政策
  • 服务设计合同标准版
  • 供热公司向用户提供
  • 买车预付款怎么记账
  • 股利如何算
  • 发放员工过节费
  • 应收款项核销的原因
  • 小规模纳税企业所得税优惠政策
  • 原材料退库怎么做凭证
  • linux查看文件的权限
  • 如何断开微软账户与电脑的链接
  • 长期待摊费用摊销会计分录
  • 为什么Windows 7搜不到网
  • 企业所得税申报表
  • 鸿蒙系统怎么设置导航键
  • 无形资产的摊销方法
  • PHP:curl_multi_setopt()的用法_cURL函数
  • 电脑密码解除步数怎么弄
  • CodeIgniter与PHP5.6的兼容问题
  • npfmntor.exe - npfmntor是什么进程 有什么用
  • html的论文
  • 挂靠公司收费几个点
  • 应付职工薪酬会产生暂时性差异吗
  • lscpu命令 显示CPU架构信息
  • php实现页面静态化
  • 公司迁移到外省 税务局需要注销吗
  • 酒店押金的账务处理
  • 减资如何弥补亏损
  • 利润表没有本月金额只有本年累计可以吗
  • wndgui降级
  • 织梦怎么用
  • 法人不发工资可以吗
  • 营业外收入 销项税
  • 房屋租赁交的定金可以退吗
  • 收到固定资产抵账账务处理
  • 购买其他权益工具投资时发生的交易费用
  • 政府部门城投公司融资安全吗
  • 个体户员工要签劳动合同吗
  • 简易征收的进项税可以抵扣吗
  • 房地产公司员工购房
  • 收到货款就必须付货款吗
  • 工程结算和工程竣工决算的区别
  • dos下运行安装文件
  • windows开发是什么
  • linux root用户登陆
  • 手动为LiteSpeed安装eAccelerator和XCache的方法分享
  • win10系统自带输入法怎么关闭
  • debug命令及其基本操作
  • 机械革命系统重装官方教程
  • 电脑安装node
  • node js入门
  • python中的is和==的区别
  • JavaScript中的对象一般分为
  • 全面解析少女时代关系
  • jquery 通过name获取元素
  • 浙江电子税务局网上开票
  • 江苏常州税务局电话人工服务电话
  • 企业所得税调整情况说明
  • 税务稽查预警指标
  • 运输装卸费属于增值税价外费用吗
  • 农民专业合作社章程完整版
  • 允许抵扣和不允许抵扣进项税额的发票种类
  • 湖南省地方税务局综合楼项目设计
  • 宣城国税局电话是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设