vue scroll事件失效
发表于|更新于
|浏览量:
那些听不见音乐的人认为那些跳舞的人疯了。——尼采。
这个坑,我遇到的时候,百度要么告诉我加高度,要么告诉我用document或者ref去获取节点
可我只想用@scroll事件,于是我在到处加@scroll,在组件上加@scroll.native,在组件里的div上加,在slot中加,然后又给它们挨个加高度,没一个好使,搞的我很头大
后面我突然发现,我给加的,好像并不是实际滚动的地方,那我明白了,首先我给引用组件放入slot中的div指定了样式:
1 | .allow-scroll { |
然后再给它绑定事件@scroll,此处如果该div下的元素高度超出了80vh,则会触发事件。。。这坑踩的,就离谱
相关推荐
2025-01-30
readability
我当然不会试图摘月,我要月亮奔我而来。——奥黛丽赫本 https://github.com/mozilla/readability 最近发现了一款由 Mozilla 开发的开源工具 Readability.js,这是一个专注于网页内容提取的库,它能够快速解析网页中的正文内容,过滤掉广告、导航栏等干扰信息。Firefox 的“阅读模式”正是基于 Readability.js 实现的。这款工具对于需要优化网页阅读体验、自动提取文章内容的开发者来说非常实用。 什么是 Readability.jsReadability.js 是 Mozilla 为了提升用户网页阅读体验而开发的一个工具,能够将网页上的主要内容提取出来并生成清爽的 HTML 片段。它非常适合集成到浏览器扩展、阅读器应用、内容聚合平台等项目中。 安装和使用1. 安装在 Node.js 环境中可以通过 npm 直接安装: 1npm install @mozilla/readability 2. 基本使用要使用 Readability.js 提取网页内容,只需传入一个 DOM 文档对象并调用 parse() 方法: 1...
2022-02-15
includes
一个人能在鼠疫和生活的赌博中所赢得的全部东西,就是知识和记忆。——《鼠疫》 我们除了使用indexOf判断字符串/数组是否包含某字符/元素还可以使用includes 区别在于数组判断中indexOf对NaN值处理会错误,而includes不会,例如: 这里显示-1说明没有匹配到 而使用includes: 可以看到成功匹配 字符串也可以使用includes 非常的方便 我们可以用prototype获取原型对象然后再调用 1Array.prototype.includes.call([1,2,3,4],1) 还是蛮方便的
2022-11-16
mix-blend-mode
为爱情赌气,就丧心病狂了!——塞万提斯 分享一个好玩的css属性: mix-blend-mode,MDN 该属性可以将元素和后面的背景进行混合 什么叫混合呢?例如我看到的一个网站: 红框框出来的部分,是鼠标移动上去的一个效果 这个小圈,与后面的图片进行了反色,而且对于不少图片都有类似效果,我一开始以为是用了两张图片做的处理 后来发现并不是,是用的这个css 1mix-blend-mode: exclusion; 其提供的不只是反色一个选项,还有很多的值,都可以使用
2022-07-12
teleport
你之前学了啥跟你以后能学啥没有什么本质联系——尤雨溪 顾名思义,teleport汉译过来就是传送的意思 官方文档:https://v3.cn.vuejs.org/guide/teleport.html#teleport 它可以将我们的元素传送到指定地点: 例如我们要实现一个挂载在body上的模态框,就可以使用teleport: 12345678910111213141516171819202122232425262728const app = Vue.createApp({});app.component('modal-button', { template: ` <button @click="modalOpen = true"> Open full screen modal! (With teleport!) </button> <teleport to="body"> <div v-if=&quo...
2024-09-04
web组件库lion
君子耻不修,不耻见污;耻不信,不耻不见信;耻不能,不耻不见用。——荀子 github: https://github.com/ing-bank/lion 官方文档: https://lion-web.netlify.app/ Lion 是一组高性能、可访问且灵活的 Web 组件 它们提供了一个无主见的白标签层,可以扩展到您自己的组件层 高性能:专注于在所有相关浏览器中实现出色的性能,具有最少的依赖项 可及性:旨在符合 WCAG 2.2 AA 标准,以创建每个人都可以使用的组件 灵活性:通过 Web Components 和 JavaScript 类提供解决方案,这些类可以使用、采用和扩展以满足所有需求 现代代码:Lion 以纯 es 模块的形式分发 公开函数/类和 Web 组件:以最合适的形式提供功能 注意:我们的演示可能看起来有点平淡无奇,但这是故意的。它们仅带有功能性样式。这是有道理的,因为主要用例是扩展这些组件,如果您这样做,则不想覆盖现有样式。 Guides: Lion 安装: 1npm i @lion/ui 使用: 1234567891011121314...
2021-10-29
nvue引入图标坑
强本而节用,则天不能贫。——荀况 今天把原来的vue页面改为nvue 发现之前的图标怎么都引不进去,搞了半天,后来通过debug发现,我引入的方式是使用添加对应的class给它加了个::before伪元素 知道了这个就很简单了,我们按照官方文档引入字体 首先我在App.vue中写入css代码: 123456/* 加载图标字体 - 条件编译模式 *//* #ifdef APP-PLUS-NVUE */.my-iconfont { font-family: myIconfont;}/* #endif */ 然后在对应的nvue页面中,在beforeCreate生命周期里调用addRule 123456789beforeCreate() { // #ifdef APP-PLUS-NVUE const domModule = uni.requireNativePlugin('dom'); domModule.addRule('fontFace', { fontFamily: 'myIcon...

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