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({},()=>{
//执行操作
});
React制作吸顶功能总结的更多相关文章
- ECSTORE导航吸顶功能
ecstore导航吸顶功能,在导航父元素中加入id,如: <div id="mainNav1"></div> 在footer.html中添加以下js代码: ...
- 类似吸顶功能解决ios不能实时监听onscroll的触发问题
问题:近期项目需要一个类似西东功能,当页面向上滚动160px后div固定在顶部 解决方法:首先,想到的是window.onscroll方法 .fixed{position:fixed;-webkit- ...
- 微信小程序吸顶功能
---------------------------HTML------------------------ <view class="navbar-wrap"> ...
- js实现导航栏的吸顶操作
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- vue滑动吸顶以及锚点定位
Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id= ...
- react.js中实现tab吸顶效果问题
在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...
- [RN] React Native 中使用 stickyHeaderIndices 实现 ScrollView 的吸顶效果
React Native中,ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果. 例如下面代码中: <ScrollView showsVert ...
- [RN] React Native 头部 滑动吸顶效果的实现
React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...
- react 吸顶实现
今天获取到一个需求,其实就是吸顶的需求,页面下滑,某一块dom隐藏时发生吸顶现象.这种特效其实老生常谈了,但是在这次做的时候,突发奇想,能否将其做成一个 hook ,从而实现出传递ref即可使得 do ...
随机推荐
- 【Azure】Azure学习方法和学习资料
学习方法: DEX为入门培训,fundamental book进阶材料,Azure 官方为补充权威材料,网站一些大拿的Blog是很多实践精华,推荐阅读. 推荐教材和学习内容: EDX培训:http:/ ...
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- node.js系列：（调试工具）node-inspector调试Node.js应用
如果你在编写Node.js代码,node-inspector是必备之选,比Node.js的内置调试器好出许多.使用起来跟Chrome的javascript调试器很相似. 使用npm安装: $ npm ...
- PHP运算符与表达式
一.概述: 在我们平时的开发中,最离不开的就是运算,在编写比较复杂的后台程序的时候,算法更是必不可少的.涉及到运算就应该了解PHP的运算符,下面我们来一起看一下PHP中常见的运算符,以及和其他语言的区 ...
- SELECT中的多表连接
MySQL多表连接查询 连接(join):将一张表中的行按照某个条件(连接条件)和另一张表中的行连接起来形成一个新行的过程. 根据连接查询返回的结果,分3类: 内连接(inner join) 外连接( ...
- 架构设计之Spring-Session分布式集群会话管理
前言 通常在web开发中,回话管理是很重要的一部分,用于存储与用户相关的一些数据.对于JAVA开发者来说,项目中的session一般由Tomcat或者jetty容器来管理. 特点介绍 尽管使用特定的容 ...
- vue2-loading-bar 一款基于Vue2的进度条插件
自学了N久vue,奈何没有练手项目,终于决心拿个东西来试试手.基于对音乐的热爱,选择的第一个demo是音乐播放器.一般播放器都有进度条,于是无意间找到这个插件,就是vue2-loading-bar,这 ...
- 详解Session分布式共享（.NET CORE版）
一.前言&回顾 在上篇文章Session分布式共享 = Session + Redis + Nginx中,好多同学留言问了我好多问题,其中印象深刻的有:nginx挂了怎么办?采用Redis的S ...
- JS判断当前手机类型
window.onload = function () { var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.ind ...
- 一个想法照进现实-《IT连》创业项目：创业时该不该用新手程序员
前言: 距离上一篇文章,转眼已然一个多月了,这段时间没出来和大伙汇报创业的进度,怪我了. 最近又感冒了,已经一个多星期了,还在感冒中,不过感冒也不能偷懒了,每天都有大把的事情等着我解决~~~ 不过今天 ...