vue scroll事件失效
发表于|更新于
|浏览量:
那些听不见音乐的人认为那些跳舞的人疯了。——尼采。
这个坑,我遇到的时候,百度要么告诉我加高度,要么告诉我用document或者ref去获取节点
可我只想用@scroll事件,于是我在到处加@scroll,在组件上加@scroll.native,在组件里的div上加,在slot中加,然后又给它们挨个加高度,没一个好使,搞的我很头大
后面我突然发现,我给加的,好像并不是实际滚动的地方,那我明白了,首先我给引用组件放入slot中的div指定了样式:
1 | .allow-scroll { |
然后再给它绑定事件@scroll,此处如果该div下的元素高度超出了80vh,则会触发事件。。。这坑踩的,就离谱
相关推荐
2025-10-21
immich
运筹帷幄之中,决胜千里之外。——司马迁《史记》 https://github.com/immich-app/immich Immich:高性能开源自托管照片&视频管理系统——你的私人 Google Photos 替代品在数字时代,照片和视频见证着我们的生活点滴。但随着数据量激增、隐私意识提升,越来越多的人开始厌倦“云厂商锁定”,渴望拥有一个属于自己的、高效、安全的照片与视频管理平台。Immich,正是当前全球最火爆的自托管多媒体管理新秀,它不仅是“Google Photos 的开源替代”,更是极客与家庭用户的首选新宠。 一、项目简介 项目地址:immich-app/immich 官网:https://immich.app 一句话描述:High performance self-hosted photo and video management solution. 主语言:TypeScript(前后端均现代技术栈) Star:81,736+ Forks:4,296+ License:AGPL-3.0 标签:self-hosted photo-gallery ...
2022-03-10
react中什么情况下不能用index作为key
立志用功如种树然,方其根芽,犹未有干;及其有干,尚未有枝;枝而后叶,叶而后花。——王守仁 我们在React遍历渲染列表时会遇到这样一个报错: 意思是说,渲染list列表时必须给每个元素指定一个唯一的key 当然你可以选择忽略这个报错,但是为什么会提示这个报错呢? 假设我们给key指定一个随机数,或者干脆不指定的话,会怎么样呢? 官方文档给出了答案: 渲染列表时的逻辑以及问题 为了解决上述问题,React 引入了 key 属性。 也就是说,如果给key指定一个随机数,或者干脆不指定的话,会造成性能问题 这个时候,我们想到了用遍历时的元素下标作为key 但是官方文档明确告诉我们: 如果列表项目的顺序可能会变化,我们不建议使用索引来用作 key 值,因为这样做会导致性能变差,还可能引起组件状态的问题。可以看看 Robin Pokorny 的深度解析使用索引作为 key 的负面影响这一篇文章。如果你选择不指定显式的 key 值,那么 React 将默认使用索引用作为列表项目的 key 值。 这里Robin Pokirny的文章中提到了,如果满足这三者,可以放心使用index作为...
2024-10-15
object-fit
能轻易做到别人感觉困难的事是人才;能轻易做到别人所不能做的工作是天才。——西德尼 讲一个小技巧,对于图片裁剪可以用这个属性:object-fit object-fit 是一个 CSS 属性,用于指定替换元素(如 <img> 和 <video>)内容的尺寸如何适应其容器。它定义了内容如何填充容器的大小,以及是否保持内容的比例 例如: 123<div style="width: 400px; height: 400px; overflow: hidden;"> <img src="https://vampireachao.github.io/imgs/head.png" style="width: 100%; height: auto; object-fit: cover; object-position: 0px 0px;transform: scale(1.2);"></div>
2020-10-10
location
方向是比速度更重要的追求。——白岩松 转载,原文 Location 对象Location 对象包含有关当前 URL 的信息。 Location 对象是 window 对象的一部分,可通过 window.Location 属性对其进行访问。 注意: 没有应用于Location对象的公开标准,不过所有浏览器都支持该对象。 Location 对象属性 属性 描述 hash 返回一个URL的锚部分 host 返回一个URL的主机名和端口 hostname 返回URL的主机名 href 返回完整的URL pathname 返回的URL路径名。 port 返回一个URL服务器使用的端口号 protocol 返回一个URL协议 search 返回一个URL的查询部分 Location 对象方法 方法 说明 assign() 载入一个新的文档 reload() 重新载入当前文档 replace() 用新的文档替换当前文档
2023-05-02
taze
在读书的时候,我们是与智者交谈;在生活的事务中,我们通常是与愚人交谈。——培根 分享一个开源项目:taze github:https://github.com/antfu/taze 话说antfu大佬是真的nb taze是一个现代化的ci工具,能够让你的依赖保持最新版 执行:npx taze
2026-04-07
openscreen
光阴给我们经验,读书给我们知识。——奥斯特洛夫斯基 OpenScreen:一位不收月费、不打水印、还愿意陪你把 Demo 做漂亮的“录屏导演”OpenScreen 站在门口,抱着一台相机,语气很轻松: 我不卖你订阅。我不在你视频角落盖章。我允许你商用。我只想让你做出 stunning demos ——那种一看就让人想点“Star”、想转发、想说“这也太清爽了吧”的产品演示和讲解视频。 它的自我介绍写得直白又有点倔: Create stunning demos for free. Open-source, no subscriptions, no watermarks, and free for commercial use. An alternative to Screen Studio. 它像是在对你说:“如果你不想每个月为 Screen Studio 付 $29,但又想做漂亮、干净、重点明确的产品 demo,那我来。” 先认识一下它:它不是 1:1 复刻,它是更轻、更直接的“基础款刚需”OpenScreen 并不假装自己是 Screen Studio 的影子。它更像...
