Webview 和 React Native 中吸顶效果实现

一、前言

在跨端开发中，离不开一些吸顶的交互场景，可以参考淘宝或是京东类电商 app 中一些 tab ，在整个容器滑动的过程中，吸顶效果非常的连贯和丝滑的，当然这些 tab 可能是用 native 开发的，但是跨端应用也能实现很不错的吸顶效果，那么今天我们就来研究一下跨端开发是如何实现吸顶的。

希望通过这篇文章，你将学习到：

webview 中吸顶的实现方式。React Native 中吸顶方法，SectionList 是如何实现吸顶的。

创作不易，希望屏幕前的你能给笔者赏个赞，以此鼓励我继续创作前端硬文。

二、webview 吸顶实现方式

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

基于 webview 的混合开发模式非常受到欢迎，回到今天的主题上来，在 webview 中如何实现吸顶效果呢？

2.1 position :sticky

webview 本质上就是 web 应用，所以我们可以使用 css 属性来做很多交互效果。如果说到吸顶效果，这里首先想到的就是 position:sticky 粘性属性。

position:sticky 是一个新的css3属性，它的表现类似于 position:relative 和 position:fixed 的交集。

在目标区域在屏幕中可见时，它的行为就像 position:relative;

而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。

通过上面可以得出，如果实现吸顶效果，设置一个 css 属性就能实现。

如上图所示，图中 head 部分是需要吸顶的内容，那么把 head 加上 position:sticky 就可以了。

sticky 的缺点：

当然 sticky 也有一些缺点：

sticky 属性存在兼容性。

sticky 和 absolute 定位属性在 ios 上的表现不友好，在 scrollview 等视图容器组件内部滚动时候，可能存在抖动的问题，这样用户体验非常差。

2.2 scrollview

webview 还有一种实现吸顶的方法，就是通过 scrollview ，scrollview 是什么？scrollview 是一个滚动的容器组件，web 中并没有现成的 scrollview 组件，常见的 scrollview 组件主要存在小程序或者一些跨段解决方案中，比如 Taro 中的 Scrollview，这些组件并非是原生组件，都是在各个平台底层基于原生的 DOM 元素和 EventListener 封装的。

以微信小程序为例子，看一下 scroll-view 如何实现吸顶，这种方式主要是依靠计算的方式，来确定什么时候元素应该吸顶了。因为 scroll-view 上有回调函数 bindscroll ，可以实时的得到滚动的距离，使用滚动距离，可以推导出吸顶临界点，比如：

通过上面可以推导出 offsetTop === scrollTop 此时就是 current 吸顶的临界点。当然在不同场景下，这个临界点可以会有区别，但大体思路是不变的。

但是目前可能存在一些问题，就是如果我们继续通过 position:absolute 来触发吸顶的话，还会有 2.1 面临的问题——在 scroll-view 中使用了定位产生抖动，那么应该如何处理呢？

笔者在这里推荐大家一种方法就是，用两个吸顶模块，来模拟吸顶效果的实现：

如上 current 是需要吸顶的组件，但是我们准备两个状态一样的组件 current1 和 current2，current1 在 scroll-view 外部，用 fixed 定位，定位在容器顶部，current2 在 scroll-view 内部，不加任何定位效果。在正常情况下，不是吸顶情况下，current1 是隐藏状态 ，current2 是显示状态。如果达到了吸顶的临界点，那么改变状态，current1 变成显示状态，current2 变成隐藏状态，这里有一点需要注意，因为我们隐藏了 current2 如果不做处理，会让下面元素顶上来，这里处理的方案是通过一个元素占位，如下面代码块中 class="hold" 元素，就是占位元素。占位元素的高度和 current2 高度相同。

用代码简单描述一下过程：

wxml中：