React 监听页面滚动，界面动态显示
<p>当页面滚动时，如何动态切换布局/样式</p><p> </p>
<p>1. 添加滚动事件的监听/注销</p>
<pre><code class="hljs php"><span class="hljs-comment">//在componentDidMount，进行scroll事件的注册，绑定一个<span class="hljs-comment">函数</span><span class="hljs-comment">，让这个<span class="hljs-comment">函数</span><span class="hljs-comment">进行监听处理<br><span class="hljs-comment"> componentDidMount() {<br><span class="hljs-comment"> window.addEventListener('scroll', this.bindHandleScroll)<br><span class="hljs-comment"> }<br><span class="hljs-comment"> //在componentWillUnmount，进行scroll事件的注销<br><span class="hljs-comment"> componentWillUnmount() {<br><span class="hljs-comment"> window.removeEventListener('scroll', this.bindHandleScroll);<br><span class="hljs-comment"> }<br><span class="hljs-comment"> bindHandleScroll = (event) => {<br><br><span class="hljs-comment"> }</span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<p> </p>
<p>2. 在state中添加参数，滚动页面时更新数据</p>
<p>更新参数后，设置样式。可以直接更新样式，也可以动态修改className然后在css文件中添加动态样式。</p>
<pre><code class="hljs xml">bindHandleScroll = (event) => {<br> // 滚动的高度<br> const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false)<br> || window.pageYOffset<br> || (event.srcElement ? event.srcElement.body.scrollTop : 0);<br> this.setState({<br> hasVerticalScrolled: scrollTop > 10<br> })<br> }<br> render() {<br> return (<br> <span class="hljs-tag"><<span class="hljs-tag"><span class="hljs-name">div</span></span><span class="hljs-tag"> <span class="hljs-attr">className=<span class="hljs-string">"header-container" <span class="hljs-attr">style=<span class="hljs-string">{{backgroundColor:this.state.hasVerticalScrolled?'#<span class="hljs-attr">ffffff'<span class="hljs-attr">:'<span class="hljs-attr">transparent'}}><br> <span class="hljs-tag"><<span class="hljs-tag"><span class="hljs-name">div</span></span><span class="hljs-tag"> <span class="hljs-attr">className=<span class="hljs-string">"headerTitle-container"><br> <span class="hljs-tag"><<span class="hljs-name">img <span class="hljs-attr">className=<span class="hljs-string">{`<span class="hljs-attr">headerTitle${<span class="hljs-attr">this.state.hasVerticalScrolled ? '<span class="hljs-attr">-scrolled' <span class="hljs-attr">: ''}`}><span class="hljs-tag"></<span class="hljs-name">img><br> <span class="hljs-tag"></<span class="hljs-name">div><br> <span class="hljs-tag"></<span class="hljs-name">div><br> );<br> }</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<p><span style="position: relative; left: -100000px">vi设计http://www.maiqicn.com</span> <span style="position: relative; left: -100000px">办公资源网站大全https://www.wode007.com</span></p>
<p>完整Code: </p>
<pre><code class="hljs javascript"><span class="hljs-keyword">import react, { Component } <span class="hljs-keyword">from <span class="hljs-string">'<span class="hljs-string">react</span><span class="hljs-string">';<br><span class="hljs-keyword">import <span class="hljs-string">'./style.less';<br><br>interface PropsData {<br>}<br>interface StateData {<br> <span class="hljs-attr">hasVerticalScrolled: boolean;<br>}<br><br><span class="hljs-class"><span class="hljs-keyword">class <span class="hljs-title">Index <span class="hljs-keyword">extends <span class="hljs-title">Component<<span class="hljs-title">PropsData, <span class="hljs-title">StateData> {<br> <span class="hljs-keyword">const</span><span class="hljs-keyword">ructor(props) {<br> <span class="hljs-keyword">super(props);<br> <span class="hljs-keyword">this.state = {<br> <span class="hljs-attr">hasVerticalScrolled: <span class="hljs-literal">false<br> };<br> }<br><br> <span class="hljs-comment">//在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理<br><span class="hljs-comment"> componentDidMount() {<br><span class="hljs-comment"> window.addEventListener('scroll', this.bindHandleScroll)<br><span class="hljs-comment"> }<br><span class="hljs-comment"> //在componentWillUnmount，进行scroll事件的注销<br><span class="hljs-comment"> componentWillUnmount() {<br><span class="hljs-comment"> window.removeEventListener('scroll', this.bindHandleScroll);<br><span class="hljs-comment"> }<br><span class="hljs-comment"> bindHandleScroll = (event) => {<br><span class="hljs-comment"> // 滚动的高度<br><span class="hljs-comment"> const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false)<br><span class="hljs-comment"> || window.pageYOffset<br><span class="hljs-comment"> || (event.srcElement ? event.srcElement.body.scrollTop : 0);<br><span class="hljs-comment"> this.setState({<br><span class="hljs-comment"> hasVerticalScrolled: scrollTop > 10<br><span class="hljs-comment"> })<br><span class="hljs-comment"> }<br><span class="hljs-comment"> render() {<br><span class="hljs-comment"> return (<br><span class="hljs-comment"> <div className="header-container" style={{backgroundColor:this.state.hasVerticalScrolled?'#ffffff':'transparent'}}><br><span class="hljs-comment"> <div className="headerTitle-container"><br><span class="hljs-comment"> <imgclassName={`headerTitle${this.state.hasVerticalScrolled ? '-scrolled' : ''}`}></img><br><span class="hljs-comment"> </div><br><span class="hljs-comment"> </div><br><span class="hljs-comment"> );<br><span class="hljs-comment"> }<br><span class="hljs-comment">}<br><br><span class="hljs-comment">export default Index;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre><br><br>
来源：https://www.cnblogs.com/xiaonian8/p/13705126.html
頁:
[1]