zoukankan      html  css  js  c++  java
  • 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>
    );
    }

    vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

    完整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;
  • 相关阅读:
    24点游戏算法
    汉诺塔算法
    台阶算法
    质因数分解算法
    全排列递归算法
    DFS 深度优先搜索例题
    容器
    数细胞
    C++栈和队列
    C++STL中vector容器 begin()与end()函数、front()与back()的用法
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13705126.html
Copyright © 2011-2022 走看看