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

  • 开专票了还能不能退款
  • 运费增值税税率有5吗
  • 月末结存材料的实际成本例题
  • 有限合伙企业属于什么经济类型
  • 个税填报后怎么撤销申报
  • 未开票收入下月开票怎么报税
  • 卖废品开发票开什么货物名称
  • 个人所得税申报操作流程
  • 小规模纳税人增值税申报表怎么填
  • 信息技术服务费计入什么会计科目
  • 土增税土地成本分摊方法
  • 城市维护建设税减免税优惠政策
  • 房地产开发企业预收款预缴增值税
  • 对方把发票丢了可以重开吗
  • 一般纳税人怎么转小规模
  • 驾校挂靠车辆账务处理?
  • 领用包装物会计处理
  • 图文解析定期定额小规模纳税人怎么申报?
  • 增值税发票作废有什么损失
  • 旅游服务费和旅游费区别
  • 小规模纳税人财务报表是按季还是按月申报
  • 兼职费用计税标准是多少
  • 长期挂账的其他应收款如何处理
  • win11安装失败无法开机
  • 现在还有票据法吗
  • 开始菜单无法打开怎么办
  • php array_splice
  • vue 高德地图 窗体
  • 有形动产融资租赁增值税即征即退政策
  • el-cascader数据渲染时不出现文字
  • kwhcommonpop.exe是什么程序
  • 最好用的无人品牌子
  • 生产性生物资产折旧计入什么科目
  • 独立核算分公司和非独立核算分公司
  • 手把手怎么写
  • php中的强制类型转换函数有哪些?
  • 会计月末账务处理程序
  • 物业管理服务小组职责
  • 往来款的意思
  • wordpress部署到github
  • 进项税和销项税的分录
  • 盈余公积企业所得税税率
  • 什么时候计提所得税费用会计分录
  • 公司年终奖要做多久才能享受
  • 两免三减半取消了吗
  • 印花税申报怎么更正采集处理
  • sql server数据表的关联
  • 增值税发票已抵扣怎么红冲
  • 房产税如何申请减免
  • 伙食费怎么入账
  • 增值税税控系统专用设备
  • 公司法认缴资本金新规
  • 一次性医疗补助金怎么计算
  • 项目提前竣工借款合法吗
  • 小规模纳税人实行简易征收办法
  • 行政机关现金管理办法
  • 税金附加科目有哪些
  • 机器折旧科目
  • 什么是资金结存,它具体包括哪些内容
  • 季度申报表弥补以前年度亏损
  • 总分类账建账顺序
  • 预提业务
  • 微软平板电脑surface pro2参数
  • ghost还原文件
  • 应用程序复制粘贴
  • linux中使用grep命令显示包含特殊字符的行
  • ubuntu 04 10
  • sixtypopsix.exe - sixtypopsix是什么进程 有什么用
  • Linux history命令的几个使用小技巧
  • Win7如何关闭Smartscreen筛选器?Win7关闭Smartscreen筛选器的方法
  • cocos2dx-js
  • node chain
  • 在javascript中逻辑运算符包括
  • VectorField2D
  • javascript怎么用
  • javascript用处
  • 交管12123怎么打电话
  • 上饶二手房契税
  • 科技公司小规模纳税人
  • 代理记账公司里的公司文件盒书写样式图片
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设