React制作吸顶功能总结

总结一下最近用react写项目时,遇到的一些坑,恩,真的还蛮坑的,主要是设置状态的时候特别不好控制,下面我们一起来看下,这里自己做了几个demo,分别看下,

主页面代码如下:

class Head extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                     contentClass:"conditionArea"
                };
                this.windowOnScroll();
                let isScrollTop = true;
            };
            windowOnScroll(){
                let _this = this;
                window.onscroll = function(){
                     //获取滚动条滚动的距离
                    let h = document.body.scrollTop;
                    console.log(h);
                    if(h > 74){
                        console.log(‘111‘);
                        _this.setState({
                            contentClass:"conditionArea conditionArea_fixed"
                        });
                    }else{
                        _this.setState({
                            contentClass:"conditionArea"
                        });
                    }
                }
            };
            render() {
                return (
                  <div className="container">
                      <div className="set_head_fixed">
                          <span className="set_text">我是头部</span>
                      </div>
                      <div id="conditionArea" className={this.state.contentClass}>
                            <div className="content_name">
                                <span>置顶块</span>
                            </div>
                      </div>
                      <div className="set_displayContent">
                           <p>内容区域</p>
                      </div>
                  </div>
                );
            }
        };
        function APP (){
           return (
              <div className="head_top ">
                      <Head  title="头部" />

              </div>
           )
        };
        ReactDOM.render(
          <APP />,
          document.getElementById(‘demo‘)
        ); 

1:头部与吸顶的块,一起移动的问题

问题:鼠标滚动到顶部时候,状态一直在更改,我们来看下效果图:

    

看吧,很明显,这是一个bug,有问题,那我们继续改,为什么状态一直在更改呢,这里我们可以用一个变量来进行控制,逻辑大概是,当滚轮达到顶部时

将其置为false,那它的状态就只会更改一次了。我们来看下核心代码,其它代码不再贴了。

if(h > 74){
        if(isScrollTop){
                 console.log(‘111‘);
                 isScrollTop = false;
                  _this.setState({
                        contentClass:"conditionArea conditionArea_fixed"
                 });

         }else{
                 console.log("333");
                 _this.setState({
                       contentClass:"conditionArea"
                 });
         }
}

我们来看下控制台打印出来的结果:为什么会出现这么多3呢?首先,有两种情况,一种用户向上滑动,然后向下滑动,另外就是,向上滑动-向下滑动-向上滑动操作

因此,当小于74px的时候,我们同样要控制它的状态。

            控制后的结果           

ok,我们状态控制好啦,代码如下:

 if(h > 74){
            if(isScrollTop){
                      console.log(‘111‘);
                       isScrollTop = false;
                      _this.setState({
                               contentClass:"conditionArea conditionArea_fixed"
                       });
              }
 }else{
             if(!isScrollTop){
                      console.log("333");
                       isScrollTop = true;
                       this.setState({
                                 contentClass:"conditionArea"
                       });
              }

 }

2:头部固定,吸顶的块移动

与上面的区别是定位的问题,这里要注意一下,无论上面哪种,吸顶的块都应该是由position:absolute 变为 position : fixed,经博主检测,使用position : relative会出现问题

在微信打开,qq浏览器,UC浏览器,百度浏览器打开均会出现卡顿,反应慢的问题,后来我就用了absolute进行定位,问题就好啦,另外,注意解决fixed的兼容性问题,setState的

做法有问题,setState是异步的,没办法做到立马将效果展示出来,必要时候直接操作DOM元素来解决问题。

css样式如下:

body {
    display: block;
    margin: 0px;
    padding: 0px;
    color: #fff;
}
.set_head_fixed{
	border:1px solid  red;
	width:100%;
	height:74px;
	background-color: #54B6E3;
	color: #fff;
	text-align: center;
	position: relative;
}
.set_text{
	margin-top: 5px;
}
.conditionArea{
	width: 100%;
	height: 80px;
    background-color:#66C6AD;
    border: 1px  solid  blue;
    text-align: center;
    position: absolute;
}
.conditionArea_fixed{
	position: fixed;
	top: 0px;
	z-index: 44;
}
.set_displayContent{
	position: relative;
    margin: 60px 10px;
    height: 1700px;
    background: #fc9720;
    border-radius: 8px;
}

其实,感觉,利用变量来控制状态是非常好的办法,关键是要知道什么时候去控制它,调用它。

3:关于setState函数

特点:

1:是异步函数。

2: this.setState 还没有被调用;

3: 批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setState的来的快)。

同步更新方法:

1:直接操作DOM

2: 在componentWillUpdate生命周期或者componentDidUpdate生命周期的回调函数去执行我们的操作。

componentDidMount(){
       //执行操作
 };

3:回调函数

this.setState({},()=>{
         //执行操作
});
时间: 2024-10-08 02:15:31

React制作吸顶功能总结的相关文章

ECSTORE导航吸顶功能

ecstore导航吸顶功能,在导航父元素中加入id,如: 1 <div id="mainNav1"></div> 在footer.html中添加以下js代码: 1 <script type="text/javascript">function getTop(e) 2 { 3 var offset=e.offsetTop; 4 if(e.offsetParent!=null) //只要还有父元素,也就是当前元素不是根节点就继续往上累

js实现导航栏的吸顶操作

1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 3 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 5 <html> 6 <head> 7 <style type="text/css&

原生js实现吸顶导航和回到顶部特效

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>吸顶导航特效</title> 6 <style type="text/css"> 7 body{ 8 margin: 0; 9 padding: 0; 10 } 11 .main{ 12 width: 10

吸顶大法 -- UWP中的工具栏吸顶的实现方式之一

如果一个页面中有很长的列表/内容,很多应用都会在用户向下滚动时隐藏页面的头,给用户留出更多的阅读空间,同时提供一个方便的吸顶工具栏,比如淘宝中的店铺页面. 下面是一个比较简单的实现,如果有同学有更好的实现,欢迎留言,让我们共同进步. 首先假设我们的页面整体包含3部分; 页面头:随页面滚动慢慢消失/重现 工具栏: 开始时随页面滚动,在页面头消失后,吸顶,固定不动 可滚动内容:一个listview 结构代码如下,为了区别清楚,我是用不同的背景色做区分: 1 <Page 2 x:Class="A

代码:jquery 吸顶 效果

(只是个简单吸顶效果,还需完善) 吸顶: <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll( function() { var m =$(document).scrollTop(); console.log(

status bar、navigationBar、tableView吸顶view设置

1. 隐藏navigationBar self.navigationController.navigationBar.hidden = YES; 2. status bar设置 -(void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent; } -(void)v

原生js吸顶式导航条

<!--吸顶式导航条--><nav class="nav"> <div> <a href="javascript: return false"><img src="n.jpg" ></a> <div class="topNav"> <div> <input type="text" placeholder=&

吸顶式和天馈式无线覆盖的区别和应用

在企业无线网络应用中,常用的无线覆盖方式有,吸顶式无线AP和天馈式无线覆盖,简单分析一下两种覆盖方案的区别和优缺点.方式一:天馈式覆盖    天馈式覆盖是用一个工业级无线AP接多个吸顶天线,AP和天线用馈线连接,称为天馈式.工业级无线AP也称为"胖AP"或大功率无线AP,无线信号强,接入人数多. 方式二:吸顶式无线AP    整个覆盖区域安装多个吸顶式无线AP,称为吸顶式.吸顶式AP已经内置天线,每隔一段距离安装一个AP,AP用网线连接至机房.吸顶式无线AP也称为"瘦AP&q

PHPCMS实现文章置顶功能的方法

我个人喜欢把PHPCMS当作博客来用,而作为一个博客,怎能少了文章置顶功能呢?其中用PHPCMS实现置顶功能非常简单,无非是修改下推荐位的名称为置顶,然后在文章列表中推送需要置顶的文章罢了. 不过博客系统中置顶文章可不会与文章列表中的文章重复,要解决这个问题其实也不难,看代码: 复制代码代码如下:{pc:content action="lists" catid="1" num="20" where="posids!=1" or