React 监听页面滚动，界面动态显示

当页面滚动时，如何动态切换布局/样式

1. 添加滚动事件的监听/注销

//在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理
    componentDidMount() {
        window.addEventListener('scroll', this.bindHandleScroll)
    }
    //在componentWillUnmount，进行scroll事件的注销
    componentWillUnmount() {
        window.removeEventListener('scroll', this.bindHandleScroll);
    }
    bindHandleScroll = (event) => {

    }

2. 在state中添加参数，滚动页面时更新数据

更新参数后，设置样式。可以直接更新样式，也可以动态修改className然后在css文件中添加动态样式。

bindHandleScroll = (event) => {
        // 滚动的高度
        const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false)
            || window.pageYOffset
            || (event.srcElement ? event.srcElement.body.scrollTop : 0);
        this.setState({
            hasVerticalScrolled: scrollTop > 10
        })
    }
    render() {
        return (
            <div className="header-container" style={{backgroundColor:this.state.hasVerticalScrolled?'#ffffff':'transparent'}}>
                <div className="headerTitle-container">
                    <img className={`headerTitle${this.state.hasVerticalScrolled ? '-scrolled' : ''}`}></img>
                </div>
            </div>
        );
    }

完整Code: 

import react, { Component } from 'react';
import './style.less';

interface PropsData {
}
interface StateData {
    hasVerticalScrolled: boolean;
}

class Index extends Component<PropsData, StateData> {
    constructor(props) {
        super(props);
        this.state = {
            hasVerticalScrolled: false
        };
    }

    //在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理
    componentDidMount() {
        window.addEventListener('scroll', this.bindHandleScroll)
    }
    //在componentWillUnmount，进行scroll事件的注销
    componentWillUnmount() {
        window.removeEventListener('scroll', this.bindHandleScroll);
    }
    bindHandleScroll = (event) => {
        // 滚动的高度
        const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false)
            || window.pageYOffset
            || (event.srcElement ? event.srcElement.body.scrollTop : 0);
        this.setState({
            hasVerticalScrolled: scrollTop > 10
        })
    }
    render() {
        return (
            <div className="header-container" style={{backgroundColor:this.state.hasVerticalScrolled?'#ffffff':'transparent'}}>
                <div className="headerTitle-container">
                    <img  className={`headerTitle${this.state.hasVerticalScrolled ? '-scrolled' : ''}`}></img>
                </div>
            </div>
        );
    }
}

export default Index;

作者：唐宋元明清2188 出处：http://www.cnblogs.com/kybs0/

站长推荐

1.云服务推荐: 国内主流云服务商，各类云产品的最新活动，优惠券领取。地址：阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台，如果你有流量，可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9303