vue 利用intersectionOberver实现全局appear/disappear事件
搬运自:https://juejin.im/post/5cd10959f265da03a00fe5c6
效果:
demo地址: https://codepen.io/deepkolos/pen/OYPNNv?editors=1011
vue:
<template>
<div @appear="onAppear" @disappear="onDisappear">box</div>
</template> <script>
export default {
methods: {
onAppear() { console.log('onAppear') },
onDisappear() { console.log('onDisappear') }
}
}
</script>
js:
extend(EventTarget.prototype, 'addEventListener', function(eventName) {
let node = this;
let ioContext = node.__IO__; if (eventName === 'appear' || eventName === 'disappear') {
// 一个节点需要一个 io 即可
if (node.__IO__) {
ioContext.listenerNum++;
return;
} let io = new IntersectionObserver(entries => {
const ioContext = node.__IO__;
const { visible: lastVisible } = ioContext;
const entry = entries[entries.length - 1];
const ratio = entry.intersectionRatio;
const visible = entry.isIntersecting && ratio >= 0; if (lastVisible === undefined) {
ioContext.visible = visible;
} else if (visible !== lastVisible) {
ioContext.visible = visible; node.dispatchEvent(
new CustomEvent(visible ? 'appear' : 'disappear', {
bubbles: false // appear/disappear是节点相关的事件不能冒泡
})
);
}
}); node.__IO__ = {
instance: io,
listenerNum: 1
};
io.observe(node);
}
}); extend(EventTarget.prototype, 'removeEventListener', function(eventName) {
let node = this;
let ioContext = node.__IO__; if (eventName === 'appear' || eventName === 'disappear') {
// 当事件为没有监听器的时候就可以把 io 注销, 释放内存
if (--ioContext.listenerNum === 0) {
ioContext.instance.disconnect();
ioContext.instance = null;
node.__IO__ = null;
}
}
}); function extend(obj, fnName, cb) {
const oldFn = obj[fnName];
obj[fnName] = function wrap() {
let ret;
oldFn && (ret = oldFn.apply(this, arguments));
cb && cb.apply(this, arguments);
return ret;
};
}
vue 利用intersectionOberver实现全局appear/disappear事件的更多相关文章
- vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- Vue父组件与子组件传递事件/调用事件
1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...
- 深入理解Vue父子组件通讯的属性和事件
在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 父子组件之间的 ...
- HTML5全局属性和事件
全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等.HTML5中又新增了一些特殊功能的全局属性和事件. 属性: HTML5属性能够赋给标签元素含义和语 ...
- ExtJS要利用观察者模式 去实现自定义的事件
// 要利用观察者模式 去实现自定义的事件 //1:由于浏览器他自己能定义内置的事件(click/blur...) // 我们也应该有一个类似于浏览器这样的类,这个类 自己去内部定义一些事件(自定义事 ...
- Asp.net mvc 自定义全局的错误事件HandleErrorAttribute无效
Asp.net mvc 自定义全局的错误事件HandleErrorAttribute,结果无效, 原因: 1.没有在RegisterGlobalFilters 里面添加或者你要的位置添加. 2.你把这 ...
- Vue 局部组件和全局组件的使用
<template> <div id="app"> <!--<img alt="Vue logo" src="./ ...
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- Vue源码探究-全局API
Vue源码探究-全局API 本篇代码位于vue/src/core/global-api/ Vue暴露了一些全局API来强化功能开发,API的使用示例官网上都有说明,无需多言.这里主要来看一下全局API ...
随机推荐
- scrapy-redis + Bloom Filter分布式爬取tencent社招信息
scrapy-redis + Bloom Filter分布式爬取tencent社招信息 什么是scrapy-redis 什么是 Bloom Filter 为什么需要使用scrapy-redis + B ...
- Function Run Fun-递归+细节处理
We all love recursion! Don't we? Consider a three-parameter recursive function w(a, b, c): if a < ...
- centos安装完php-fpm、nginx后访问网站出现权限问题
nginx.conf www.conf 这两个文件上面改用户为www. 如果不知道自己的配置文件位置问题,使用命令查找文件位置: find / -name 'nginx.conf' -print 添加 ...
- (二十三)Http请求的处理过程
- Dribbble 流行的配色风格是什么?
Dribbble 是众所周知的设计社群网站,在网站中有许多人分享设计作品,互相交流或从其他设计获取灵感.当然也有不少网站应运而生,例如 Freebbble 可免费下载 Dribbble 数千种设计素材 ...
- js只能输入数字和小数点
1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...
- spark函数sortByKey实现二次排序
最近在项目中遇到二次排序的需求,和平常开发spark的application一样,开始查看API,编码,调试,验证结果.由于之前对spark的API使用过,知道API中的sortByKey()可以自定 ...
- YARN设计思路
- webgoat的构建
如何打开webgoat 1.ctrl+r 打开命令 2.cmd 打开命令编辑器 3.我的webgoat保存在E:/安全软件/webgoat-container-7.0.1-war-exec下 4.在 ...
- flex:1将页面铺满
代码示范: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...