微信小程序开发——Skyline中使用实现元素的吸顶

微信小程序开发——skyline中使用实现元素的吸顶

Skyline简单介绍

Skyline是微信小程序的新的渲染引擎，其相比于Webview引擎拥有更好的性能，同时也支持更多原生的新特性，比如Worklet动画、路由跳转的转场动画、共享元素动画、全局工具栏等，这些新特性都可以让小程序拥有更加丝滑的操作，以及转场。小编在此非常推荐大家去使用Skyline进行自己的小程序开发。

Skyline目前支持按页面去升级，也就是部分页面可以继续使用Webview，部分可以使用Skyline，具体的配置方法可以参考官方文档：Skyline 渲染引擎 / 从 WebView 迁移 / 起步。

不过Skyline跟Webview的开发还是有一些区别，本文主要是介绍如何在Skyline下实现元素的吸顶操作。

WebView下的吸顶实现

在webview模式下实现吸顶跟web端差不多，可以使用css直接实现，即：

.sticky{
    position: sticky;
    top: 0;
    z-index: 9;
}

不过如果吸顶的元素在scroll-view中时，还需要配置scroll-view的using-sticky属性为true，否则滚动超过一屏之后，置顶的元素会被隐藏:

<scroll-view using-sticky>
    <view class="sticky">吸顶的元素</view>
</scroll-view>

Skyline下的吸顶实现

在skyline模式下，如果需要吸顶的元素是在scroll-view中，使用css来设置是无效的，这时我们需要使用别的方式。

skyline有两个特有的吸顶元素，分别是sticky-header和sticky-section，两个元素均需要放在<scroll-view type="custom">内部来使用，stick-header可以需要作为scroll-view的直接子节点，或者stick-section的直接子节点；而sticky-section则只能作为scroll-view的直接子节点来使用。

<scroll-view type="custom">
    <sticky-header>
        <view>吸顶元素</view>
    </sticky-header>
    <list-view>
        <view class="list">
        滚动的列表内容
        </view>
    </list-view>
</scroll-view>

需要注意的是skyline下的使用<scroll-view type='custom'>时，需要滚动显示的列表内容需要放置在<list-view>元素内部，否则不会渲染。

总结

Skyline下的滚动渲染确实比Webview下的更加的流畅，效果也更好。但使用方式上的区别，也会带来一定的问题，当用户的手机不支持Skyline渲染时，吸顶可能会失效。所以在skyline下，sticky-header元素最好也加上sticky类名，然后wxss里面也加上下面wxss的内容：

<scroll-view type="custom">
    <sticky-header class="sticky">
        <view>吸顶元素</view>
    </sticky-header>
    <list-view>
        <view class="list">
        滚动的列表内容
        </view>
    </list-view>
</scroll-view>

.sticky{
    position: sticky;
    top: 0;
    z-index: 9;
    display: flex;
}

以保证回退到Webview模式下时，也吸顶的效果。

wxss中display: flex;很重要，请不要忽略，否则吸顶会无效。