react顶部导航栏固定顶部

2,062 阅读1分钟

顶部固定导航方式千千万,我推荐三种,觉得有用可以点个赞,谢谢

(推荐第三种组件库)

1. 原生方法

事件监听方法包括window.addEventListener(“scroll”, () => {})
和window.ontouchmove = () => {}。(主要应对苹果系统)

2. react-native 实现列表吸顶效果

使用RN自带组件SectionList自带的特性
(SectionList在使用的时候section都会吸顶停留,因为ios的系统特性默认的。但Android上不行,所以需要设置 stickySectionHeadersEnabled=true。)

3. ant 组件库的顶部吸顶方式

使用Affix组件,(使用组件库最省事)

<div>
  <Affix offsetTop={this.state.top}>
     <div id="topBanner">{topBanPC}</div>
  </Affix>
</div>