一、前言在跨端开发中，离不开一些吊顶交互场景。可以参考淘宝或者京东电商APP中的一些Tab，在滑动整个容器的过程中，天花板效果非常连贯，丝滑。当然，这些选项卡可能是用原生开发的，但是跨终端应用也能达到很好的吊顶效果。那么今天我们就来研究一下跨终端开发是如何进行的。实现天花板。希望通过这篇文章，你会学到：webview中天花板的实现。ReactNative中的天花板方法，SectionList是如何实现天花板的。创作不易，希望屏幕前的各位能给作者点个赞，以此来鼓励我继续创作前端硬文。2、webview吸顶的实现方法在移动开发中，webview已经成为非常重要的一环。比如app中嵌入的网页，或者小程序的视图载体，本质上都是webview。基于webview的混合开发模式很流行。回到今天的话题，如何在webview中实现吸顶效果？2.1定位:stickywebview本质上是一个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.2scrollviewwebview实现吸顶还有一种方式，就是通过scrollview，什么是scrollview？Scrollview是一个滚动的容器组件。web中没有现成的scrollview组件。常见的scrollview组件主要存在于小程序或者一些横截面的解决方案中，比如Taro中的Scrollview。这些组件并不是原生组件，而是在各个平台的底层，基于原生DOM元素和EventListener进行封装。以微信小程序为例，看看scroll-view是如何实现吸顶的。该方法主要依靠计算方法来确定元件何时应该吊顶安装。因为scroll-view上有回调函数bindscroll，所以可以实时获取滚动距离。使用滚动距离，可以推导出天花板的临界点。例如offsetTop===scrollTop可以从上面推导出来。这个时候，就是当前天花板的临界点。观点。当然，在不同的场景下，这个临界点可能会有所不同，但总体思路是一样的。但是目前可能会存在一些问题，就是如果我们继续使用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中：js:/*处理滚动事件*/handleScroll(event){const{scrollTop}=event.detailconst{offsetTop,show}=this.dataconstisCeiling=scrollTop===offsetTopif(isCeiling!==show){/*当Ceiling状态改变时*/this.setData({show:isCeiling})}}还有这种方式实现天花板也有一些缺点，就是在快速滑动的时候，比如小程序，因为天花板触发调用setData，setData底层会调用native通信方法，所以updateonview会滞后，直观感觉就是topeffect滞后。3、ReactNative中的吸顶方式ReactNative是一种跨端开发的解决方案。与webview不同的是，webview的渲染还是和web一样的。RN与webview的不同之处在于它采用了Native的方式进行渲染。所以渲染性能优于webview。在RN中有很多方法可以实现天花板。ScrollView、FlatList、SectionList都可以实现天花板效果。3.1ScrollView和FlatListScrollView和FlatList一般用于列表组件。两者都有一个stickyHeaderIndices，可以轻松实现天花板效果。stickyHeaderIndices：子视图下标数组，用于确定哪些成员会固定在顶部滚动后的画面。例如，传递stickyHeaderIndices={[0]}将使第一个成员粘在滚动视图的顶部。此属性不能与horizo??ntal={true}一起使用。不过在笔者的作品中，使用天花板的场景并不仅仅是列表中的某个元素，而有可能是视图中某个section模块的头部。那么接下来要介绍一个场景，就是通过SectionList来实现天花板的效果。3.2SectionList介绍及如何实现天花板效果SectionList是一个高性能的分组（section）列表组件，支持以下常用功能：完全跨平台。当显示或隐藏行组件时，可以配置回调事件。支持单独的标头组件。支持单独的尾部组件。支持自定义行分隔符。支持分组的标题组件。支持分组分隔符。支持多种数据源结构，支持下拉刷新。支持上拉加载。SectionList，顾名思义，就是一个Section模块的列表。SectionList的天花板效应也得益于一个属性——stickySectionHeadersEnabled。当stickySectionHeadersEnabled为true时，当下一个section将其上一个section的可见区域推离屏幕时，这个section的header会粘在屏幕顶部。此属性在iOS上默认可用，因为这是iOS的平台规范。如上，我们期望section2的当前模块为吸顶，那么当section1元素离开可见区域时，section2的当前模块为吸顶。这样说可能有的同学不明白，我们来看看具体的使用。具体用法：constdefaultSections=[{data:[name:'section1'],key:'section1',},{data:[name:'section2'],key:'section2',},]functionIndex(){//....保存一些逻辑constrenderContent=({item:{name}})=>(name==='section1'?:);/*当只有section2有头部时会是天花板*/constrenderHeader=({section:{key}})=>(key==='section2'&&)return}如上，可以随意结合sections、renderSectionHeader和renderItemSectionList需要显示的内容和header，让吊顶功能更加灵活。4.总结本文介绍了webview和ReactNative在跨端开发中实现吸顶的主流方式，希望能为做这类功能的同学提供一个解决方案。参考文档ReactNative中文网参考[1]https://juejin.cn/post/7112770927082864653：https://juejin.cn/post/7112770927082864653
