vue scroll事件失效
发表于|更新于
|浏览量:
那些听不见音乐的人认为那些跳舞的人疯了。——尼采。
这个坑,我遇到的时候,百度要么告诉我加高度,要么告诉我用document或者ref去获取节点
可我只想用@scroll事件,于是我在到处加@scroll,在组件上加@scroll.native,在组件里的div上加,在slot中加,然后又给它们挨个加高度,没一个好使,搞的我很头大
后面我突然发现,我给加的,好像并不是实际滚动的地方,那我明白了,首先我给引用组件放入slot中的div指定了样式:
1 | .allow-scroll { |
然后再给它绑定事件@scroll,此处如果该div下的元素高度超出了80vh,则会触发事件。。。这坑踩的,就离谱
相关推荐
2026-02-14
chrome-devtools-mcp
你热爱生命吗?那幺别浪费时间,因为时间是组成生命的材料——富兰克林 让你的 AI 助手真正“看见”浏览器:Chrome DevTools MCP 深度介绍与上手指南如果你正在用 Gemini、Claude、Cursor 或 Copilot 这样的编码助手进行自动化、调试或性能分析,你很快就会遇到一个难题:如何让 AI 真正地“连接”到一个真实的 Chrome 浏览器,稳定地执行操作、读取页面状态,并且跑出可信的性能结果? 来自 ChromeDevTools/chrome-devtools-mcp 的 Chrome DevTools MCP(Model Context Protocol)服务器,正是为此而生。它以 MCP 服务器的形式,向你的 AI 编码助手暴露 Chrome DevTools 的能力:自动化操作、网络与控制台调试、截图与快照、性能追踪与洞察……并且由 Puppeteer 提供可等待、可重试的可靠自动化基底。 仓库简介(Description):Chrome DevTools for coding agents主语言:TypeScript许可协议:Ap...
2024-02-21
用canvas消除锯齿的方式
不和不可以接物,不严不可以驭下。——林逋 分享几种canvas消除锯齿的方式 1. 线条坐标增加0.5123456789<canvas id="canvas1" width="200" height="200"></canvas><script> var canvas = document.getElementById('canvas1'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 0.5); // 使用0.5增量对齐像素 ctx.lineTo(200, 0.5); // 绘制一条边缘清晰的直线 ctx.stroke();</script> 2. 使用高清画布1234567891011<canvas id="canvas2" style="width:200px; height:200px...
2023-02-06
js发送通知
温和的对待,不会使敌人变成朋友——萨迪 文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Notification https://developer.mozilla.org/zh-CN/docs/Web/API/notification/requestPermission 代码如下 1234567Notification.requestPermission().then((permission) => { // If the user accepts, let's create a notification if (permission === "granted") { const notification = new Notification("Hi there!"); // … } }); 效果: 完整代码: 1234567891011121314151...
2022-06-15
konva-react
“善良一点,因为大家的一生都不容易。”——《奇迹男孩》。 官方文档:https://konvajs.org/docs/react/ 中文文档:http://konvajs-doc.bluehymn.com/docs/react/ 安装: 1pnpm install react-konva konva --save 在konva中能做到的,在konva-react也一样能做到,只不过是换了一种写法罢了 这里有个使用konva-react的在线编辑器Demo https://konvajs.org/docs/sandbox/Canvas_Editor.html 是基于一个叫Polotno的框架,它提供了多种react对konva的封装,能开箱即用 https://polotno.dev/ 但其不可以免费用于商业用途 https://codesandbox.io/embed/github/polotno-project/polotno-site/tree/source/examples/polotno-demo?fontsize=11&hidenavigation=1&a...
2022-08-05
Navigator.clipboard
人类侥幸拥有了智慧,就应该善用它。——王小波 惯例,MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/clipboard 注意该API只能在https或者本地开发环境生效 剪贴板 Clipboard API 为 Navigator 接口添加了只读属性 clipboard,该属性返回一个可以读写剪切板内容的 Clipboard 对象。 在 Web 应用中,剪切板 API 可用于实现剪切、复制、粘贴的功能。 只有在用户事先授予网站或应用对剪切板的访问许可之后,才能使用异步剪切板读写方法。许可操作必须通过取得权限 Permissions API 的 "clipboard-read" 和/或 "clipboard-write" 项获得。 我们来写一段代码: 123456789<body> <div class="cliptext"></div> <script> ...
2021-11-04
uniapp分包
当众人都哭时,应该允许有的人不哭。当哭成为一种表演时,更应该允许有的人不哭。——莫言 我们在使用uniapp进行微信小程序开发时可能会遇到如下情况: 这是因为微信小程序官方文档提到: 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。 在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。 在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。 目前小程序分包大小有以下限制: 整个小程序所有分包大小不超过 20M 单个分包/主包大小不能超过 2M 对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。 此时可以进行简单的静态资源处理,将static目录下的图片之类的压缩或者放到在线图床上 如果在这样处理后还是提示超...

阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog