我的编程空间,编程开发者的网络收藏夹
学习永远不晚

react.js中怎么实现tab吸顶效果

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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吸顶效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

react.js中怎么实现tab吸顶效果

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Webview 和 React Native 中吸顶效果实现

在移动端开发中,webview 已经成为很重要的一部分,比如 app 中内嵌的 web 页面,或者小程序的视图载体,本质上都是 webview。

RecyclerVIew实现悬浮吸顶效果

RecyclerVIew实现悬浮吸顶效果图 这里写图片描述主页面布局2023-05-30

微信小程序怎么实现吸顶盒效果

本文小编为大家详细介绍“微信小程序怎么实现吸顶盒效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么实现吸顶盒效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。html部分
2023-07-02

怎么在android应用中实现一个RecyclerView悬浮吸顶效果

本篇文章为大家展示了怎么在android应用中实现一个RecyclerView悬浮吸顶效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。MultiType-Adapter打造悬浮吸顶效果注:当前版本
2023-05-31

Android 实现当下最流行的吸顶效果

开始逐渐领略到ItemDecoration的美~ 今天让我 使用 ItemDecoration 来完成 可推动的悬浮导航栏的效果,最终实现的效果如下图:具体实现步骤如下: 根据我前面的文章所讲的RecyclerView的基本使用,我们先来完
2022-06-06

小程序如何实现简单吸顶效果

这篇“小程序如何实现简单吸顶效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“小程序如何实现简单吸顶效果”文章吧。要求:1.
2023-06-30

如何使用Android实现上拉吸顶效果

这篇文章给大家分享的是有关如何使用Android实现上拉吸顶效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下效果图1.home_layout.xml此布局即可实现上拉标题固定在顶部
2023-06-29

AndroidRecyclerView实现吸顶动态效果流程分析

RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足。其可以实现数据纵向滚动,也可以实现横向滚动(ListView做不到横向滚动)。接下来讲解RecyclerView的用法
2022-12-22

Android Jetpack Compose如何实现列表吸顶效果

这篇文章主要介绍“Android Jetpack Compose如何实现列表吸顶效果”,在日常操作中,相信很多人在Android Jetpack Compose如何实现列表吸顶效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法
2023-06-29

CSS怎么实现吸附效果

这篇文章主要讲解了“CSS怎么实现吸附效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS怎么实现吸附效果”吧!原理在 jQuery 时代就有很多吸附效果插件了,现在常用的三大前端框架也
2023-06-27

编程热搜

目录