Webview 和 React Native 中吸頂效果實現

作者：前端Sharing 2022-07-28 14:33:32

在移動端開發中，webview 已經成為很重要的一部分，比如 app 中內嵌的 web 頁面，或者小程序的視圖載體，本質上都是 webview。

一、前言

在跨端開發中，離不開一些吸頂的交互場景，可以參考淘寶或是京東類電商 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中：

<current1 wx-if="{{ show }}" >
<scroll-view bindscroll="{{ handleScroll }}"  >
   <view class="hold" wx-if="{{ show }}" />
   <current2 wx-if="{{ !show }}" >
</scroll-view>

js 中：

/* 處理滾動事件 */
handleScroll(event){
    const { scrollTop } = event.detail
    const { offsetTop,show }= this.data
    const isCeiling = scrollTop === offsetTop
    if(isCeiling !== show ){
        /* 當吸頂狀態發生變化時 */
        this.setData({
           show:isCeiling
        })
    }
}

這種方式實現吸頂也有一些缺點，就是當快速滑動的時候，比如小程序，因為觸發吸頂調用 setData ，setData 底層會調用于 native 通信的方法，這樣視圖上的更新會滯后，直觀上的感受就是置頂效果滯后。

三、React Native 中的吸頂方式

React Native 是跨端開發的一個解決方案，不同于 webview，webview 的渲染還是走 web 那一套，而 RN 這個一點就不同于 webview，采用了 Native 方式來渲染，所以就渲染性能上要優于 webview。

RN 中有很多中實現吸頂的方式，ScrollView ，FlatList ，和 SectionList 都能實現吸頂效果，

3.1 ScrollView 和 FlatList

ScrollView 和 FlatList 一般用于列表組件，兩者中有一個stickyHeaderIndices 可以輕松實現吸頂效果。

<ScrollView
   stickyHeaderIndices={[0]}//第一個子元素即頭部組件，上滑時吸頂  
/>

stickyHeaderIndices: 一個子視圖下標的數組，用于決定哪些成員會在滾動之后固定在屏幕頂端。舉個例子，傳遞stickyHeaderIndices={[0]}會讓第一個成員固定在滾動視圖頂端。這個屬性不能和horizontal={true}一起使用。

但是筆者在工作中，用到吸頂的場景，并不是單單列表中的某一個元素，有可能是視圖中某一個 section 模塊的頭部。

所以接下來重點介紹一個場景，就是通過 SectionList 來實現吸頂效果。

3.2 SectionList 介紹及如何實現吸頂效果

SectionList 是高性能的分組(section)列表組件，支持下面這些常用的功能：

完全跨平臺。
行組件顯示或隱藏時可配置回調事件。
支持單獨的頭部組件。
支持單獨的尾部組件。
支持自定義行間分隔線。
支持分組的頭部組件。
支持分組的分隔線。
支持多種數據源結構
支持下拉刷新。
支持上拉加載。

SectionList 顧名思義，就是分 Section 模塊的列表。SectionList 的吸頂效果也是得益于一個屬性——stickySectionHeadersEnabled。

當 stickySectionHeadersEnabled 為 true 的時候，當下一個 section 把它的前一個 section 的可視區推離屏幕的時候，讓這個 section 的 header 粘連在屏幕的頂端。這個屬性在 iOS 上是默認可用的，因為這是 iOS 的平臺規范。

如上我們期望 section2 的 current 模塊吸頂，那么當 section1 元素離開可視區域的時候，section2 的 current 就會吸頂了。這樣說，有的同學可能不明白，我們來看一下具體使用。

具體使用：

const defaultSections = [
    { 
        data:[ name:'section1' ], 
        key:'section1',
    },
    { 
        data:[ name:'section2' ], 
        key:'section2',
    },
]
function Index(){
    //....省去一些邏輯
    const renderContent = ({ item:{ name } }) => ( name === 'section1' ? <Section1Content /> : <Section2Content />);
    /* 當只有 section2 有頭部并且會吸頂 */
    const renderHeader = ({ section:{ key } }) => (key === 'section2' && <Current />)
    return <SectionList  
        sections={defaultSections}         // section 的配置項
        renderSectionHeader={renderHeader} // 分 section 渲染頭部
        renderItem={renderContent}         // 分 section 渲染主體內容
        stickySectionHeadersEnabled        // 設置吸頂狀態為 true
    />
}

如上，可以通過 sections ，renderSectionHeader，renderItem 來自由的組合 SectionList 需要展現的 content 和 header，這樣會讓吸頂功能更加靈活。

四、總結

本文介紹了跨端開發中，webview 和 React Native 實現吸頂的主流方式，希望能給做此類功能的同學提供一個解決思路。

參考文檔

React Native 中文網

參考資料

[1]https://juejin.cn/post/7112770927082864653: https://juejin.cn/post/7112770927082864653

責任編輯：武曉燕來源：前端Sharing