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中: