视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
React.Js添加与删除onScroll事件的方法详解
2020-11-27 22:26:26 责编:小采
文档


React简介

React是有开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题。

React的优势

  • 解决大规模项目开发中数据不断变化变得难以操作的问题;
  • 组件化开发,使得开发更加快速;
  • 单向数据流,有利于找到问题;
  • 虚拟DOM,在React内部有一套diff算法可以快速的计算出整体需要改动的位置,从而做到快速局部刷新;举个栗子:删除一个列表再插入个新表,计算后会比较出不同然后插进去;
  • 前言

    大家都可能会遇到这样的问题,那就是滚动事件 。比较获取div的滚动事件,在ReactJS想要给div添加一个滚动事件,那基本上是添加不上的(可能是我的能力有限吧,反正我到目前为止,还没有找到可以直接给DIV添加滚动事件的)。

    要想实现滚动,那就必须得componentWillMount里注册scroll事件, window.addEventListener(‘scroll', this.onScroll.bind(this)) ,添加事件非常容易的就添加上了。

    在componentWillUnmount 里删除 window.removeEventListener(‘scroll', this.onScroll.bind(this)) 

    添加容易,删除难,上面那种 remove是删除不了的。在其它页面里,如果你滚动也会触发 onScroll里的事件,此时就会报错,说组件已经卸载,不能进行操作,检查一下代码等等吧。

    我想肯定有遇到了,也有解决的办法,果真找到了一篇文章移除 scroll 办法的。

    代码如下:

    componentDidMount() {
     regScroll(this.handler.bind(this));
     //window.addEventListener('scroll', this.handler.bind(this),false)
    }
    
    componentWillUnmount() {
     window.onscroll = '';
     //window.removeEventListener('scroll', this.handler.bind(this),false)
    }
     //添加事件监听
    function regScroll(myHandler) {
     if (window.onscroll === null) {
     window.onscroll = myHandler
     } else if (typeof window.onscroll === 'function') {
     var oldHandler = window.onscroll;
     window.onscroll = function () {
     myHandler();
     oldHandler();
     }
     }
    }
    //删除所有事件监听
    function removeScrollHandler(){
     window.onscroll=''
    }

    总结

    下载本文
    显示全文
    专题