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

  • 纳税检查调整的滞纳金怎么收
  • 企业一般户需要哪些资料
  • 建筑劳务如何开三个点的发票
  • 公司被员工劳动仲裁
  • 怎样填写增值税普通发票
  • 怎样根据税负率调账
  • 企业所得税发票税前扣除异常
  • 收到的其他与筹资活动有关的现金包括
  • 湖北省异地预缴增值税
  • 股东个人固定资产怎么查
  • 企业应收账款无论是否带息,在年末资产负债表中均应以
  • 当月商品已出库货款未收到怎么做分录?
  • 上年度重复结转会计分录
  • 关于外债利息的规定
  • 个人代持股票的交易流程
  • 简易计税的分包款可以留到下期抵扣吗
  • 运输企业营改增
  • 印花税本月没有,忘记零申报,有影响吗了
  • 企业所得税季报填报说明
  • 自然人出租房屋房产税
  • 企业年报最容易掉进的九大“陷阱”
  • 如何确定增值税以旧换新方式下销售货物的销售额
  • 金蝶软件入库
  • 印花税计税金额是含税还是不含税
  • 工会经费单据
  • mac怎么创建热点
  • 出口暂定关税
  • 在win10中显示我的电脑
  • transformer toys
  • linux的ps命令用法
  • 企业办理银行结汇流程
  • 股东可以随时退出吗
  • 交易性金融资产的交易费用计入哪里
  • php代码检测
  • 常用的3个第三方类库
  • 电子发票有哪些版本
  • php中验证码如何实现登录验证
  • 房产税计入哪里
  • php 字符串处理函数
  • 国税系统怎么认证发票
  • css基础入门
  • smitty命令用法
  • 浅谈php中静态方法的应用
  • 2019年4月1日降低城镇职工什么单位缴费比例
  • 应纳税所得额100-300万税率
  • 福利费计入科目
  • 销售佣金 会计分录
  • 经营现金支出包含哪些内容
  • 股权转让受让方委托书
  • 增值税发票抵扣期限是多久
  • sql server怎么创建约束
  • 房地产项目公司组织架构
  • 公司购入的财务会计分录
  • 外购的商品赠送客人是否销售吗
  • 员工工伤申请流程
  • 押金退还需要多久
  • 预收账款的借方余额反映的是
  • 补缴以前年度养老保险分录
  • 计提是好是坏
  • 主营业务收入用什么账簿登记
  • 农业银行多级账簿可以代发工资吗
  • 设备信息windows6.1
  • win7硬盘设置在哪里设置
  • linux 的ll
  • mac怎么设置默认打开方式
  • linux中cat命令的用法含义
  • 阿里云安装
  • win7无法启动print spooler服务,错误5
  • downloadplus.exe是什么进程 作用是什么 downloadplus进程是安全的吗
  • windows7升级到win8
  • 一打字就出现windows设置
  • linux简明教程
  • windows媒体中心关不掉
  • linux 怎么样
  • jquery设置滚动条
  • jquery中获取元素里边内容用什么方法
  • flash和javascript
  • windows的安装类型
  • 设计一个投票程序
  • 原单位已交社保,新单位怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设