浅谈react.js中实现tab吸顶效果的问题
时间:2019-04-01
本文章向大家介绍浅谈react.js中实现tab吸顶效果的问题,主要包括浅谈react.js中实现tab吸顶效果的问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部。
实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed。
在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed。
一开始我是这样写的:
import cs from 'classnames'; class FixedTab extends React.Component{ constructor(props){ super(props); this.state = { navTop: false } this.$tab = null; this.offsetTop = 0; } componentDidMount(){ this.$tab = this.refs.tab; if(this.$tab){ this.offsetTop = this.$tab.offsetTop; window.addEventListener('scroll',this.handleScroll); } } handleScroll(){ let sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(sTop >= this.offsetTop){ this.setState({ navTop: true }) } if(sTop < this.offsetTop){ this.setState({ navTop:false }) } } render(){ return( <div ref="tab" className={cs({'fixed':this.state.navTop})}></div> ) } }
然后我发现这样写有问题,当我滚动条滚动距离达到条件时,tab是出现了吸顶的效果,但一瞬间又恢复了,滚动条也回弹了,一直无法继续下拉。
我一开始以为判断逻辑有问题,但一直找不到解决的办法,后来我怀疑是state值改变的时间差导致的,好像陷入了一个死循环,然后我就在判断滚动距离之前加了一个判断navTop的状态。
修改的主要代码如下:
handleScroll(){ let sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(!this.state.navTop && sTop >= this.offsetTop){ this.setState({ navTop: true }) } if(sTop < this.offsetTop){ this.setState({ navTop:false }) } }
这样修改之后吸顶效果就正常了。
我认为就是setState方法导致的问题,setState本身是一个异步的方法,它还有一个参数是回调函数。
以上这篇浅谈react.js中实现tab吸顶效果的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- lncRNA实战项目-第四步-得到表达矩阵的流程
- 一次切割日志引发的血案
- lncRNA实战项目-第三步-了解参考基因组及注释文件
- 如何通过iframe调用其他页面的内容
- WCF 学习总结1 -- 简单实例
- Java8 + Tomcat8 实现Websocket 例子
- Python Syslog Server 开发实例
- WCF 学习总结2 -- 配置WCF
- SQLite事务 SQLite插入多条语句为什么这么慢?.net (C#)
- Linux 应用程序开发入门
- LINQ to XML LINQ学习第一篇
- PHP 安全与性能
- Extjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式
- WPF备忘录(5)怎样修改模板中的控件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- AtCoder Beginner Contest 154
- map + pair用法练习
- 蛇形矩阵
- 【SpringBoot WebFlux 系列】 header 参数解析
- URL 去重的 6 种方案!(附详细实现代码)
- 原生JS封装拖动验证滑块你会吗?
- 企业远程视频会议云服务EasyRTC-SFU版本支持 https 功能设计逻辑
- python之编码解码、字符串常用方法
- python之列表
- 一文带你深入理解Mysql索引底层数据结构与算法
- CGI & FastCGI
- 可输出sql的PrepareStatement封装
- spring mvc基础配置
- spring 事务管理方式及配置
- spring 整合 ActiveMQ