vue scroll事件失效
发表于|更新于
|浏览量:
那些听不见音乐的人认为那些跳舞的人疯了。——尼采。
这个坑,我遇到的时候,百度要么告诉我加高度,要么告诉我用document或者ref去获取节点
可我只想用@scroll事件,于是我在到处加@scroll,在组件上加@scroll.native,在组件里的div上加,在slot中加,然后又给它们挨个加高度,没一个好使,搞的我很头大
后面我突然发现,我给加的,好像并不是实际滚动的地方,那我明白了,首先我给引用组件放入slot中的div指定了样式:
1 | .allow-scroll { |
然后再给它绑定事件@scroll,此处如果该div下的元素高度超出了80vh,则会触发事件。。。这坑踩的,就离谱
相关推荐
2020-08-04
javascript防抖
JavaScript防抖:用于防止重复表单提交等场景 点击一次后,执行防抖函数antiShake,按钮设置为不可用状态,开始计时,计时结束移除不可用状态 123456789<button onclick="antiShake(this)">防抖测试</button> <script type="application/javascript"> function antiShake(dom) { dom.setAttribute("disabled", "disabled"); setTimeout(() => { dom.removeAttribute("disabled"); }, 3000); } </script> 顺带聊聊 12//计时器清零,参...
2021-11-15
程序化的事件侦听器
吾心信其可行,则移山填海之难,终有成功之日。——孙中山 vue官方文档——程序化的事件侦听器 vue官方文档——实例方法/事件 我们可以使用this.$on在vue中侦听一个事件 123vm.$on('test', function (msg) { console.log(msg)}) 然后我们可以在其他地方访问它 12vm.$emit('test', 'hi')// => "hi" 例如这里,我在一个页面中使用vm.$on 而在另一处中使用vm.$emit 可以看到成功调用test事件 基于这一点,我们可以在uniapp中进行页面间的通信 uniapp官方文档 也就是说,在其中一个页面中我们使用uni.$on或者uni.$once,在另一个页面中就可以使用uni.$emit进行调用,前提是uni,$on或者uni.$once必须触发成功 uni.$once触发后就会立马移除该监听器,也就是说只能触发一次 而uni.$on就只能使用uni.$off进行...
2022-09-21
three.js
阿谀奉承而无所图的人极少;爱奉承的话,就免不了要付出代价——佚名 一个js的3D库 git仓库:https://github.com/mrdoob/three.js 官网:https://threejs.org/ 其中包含了很多案例 甚至有用它做游戏:
2024-07-02
uniapp生成二维码
绝不离开自己祖国的人充满了偏见。——哥尔多尼 分享一个库,在uniapp里能生成指定二维码 https://github.com/q310550690/uni-app-qrcode uni-app 二维码生成器作者:诗小柒 H5、微信小程序、支付宝小程序、APP,其它平台的小程序没有测试 使用canvas生成 可设置二维码背景色,前景色,角标色 可设置二维码logo 重要的事情说3遍 重要的事情说3遍 重要的事情说3遍 IOS、Android真机都可以正常生成二维码 使用的时候出现无法生成二维码或空白的请先github直接打包下载,问题依旧,请github上直接提出问题并配图 有问题请说明问题原因,这样我才好定位,否则我也无法解决 如果此插件有帮助到你请打5分或赞赏我,你的支持是我更新的动力 图片1 是微信小程序真机实测 图片2 是微信小程序模拟实测 图片3 是支付宝小程序模拟器实测 图片4 是安卓真机实测 图片5 H5 开始使用NPM 1npm i tki-qrcode GIT 1git clone https://github.com/q310550...
2022-05-13
vue props注意
等到看你银色满际,等到分不清季节更替,才敢说沉溺。——《水星记》 官方文档:https://cn.vuejs.org/v2/guide/components-props.html 我们在使用vue的prop时 如果prop其数据类型为一个对象 则传入的是一个对象的地址引用 我们如果在子组件中使用watch将其赋值给一个data,用于外部组件状态发生变化时,内部的某一data也能同时响应: 12345678 watch: { productionData: { immediate: true, handler() { this.myData = this.myProp }, }} 这时候如果我们对myData里的属性进行更改,发现外部(父组件)传过来的对象数据源也发生了变更 如果我们想要深拷贝 则可以使用: 1234567891011function deepClone( obj ){ let clone = obj; if (obj &...
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...

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