一、前言

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