Sticky 吸顶容器，用于将标题栏在滚动时固定到页面顶部。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

组件放置页面根目录下，且页面内容足够滚动。

<wui-sticky>
	<view class="wui-header">滑动页面查看效果</view>
</wui-sticky>

.wui-header {
	width: 100%;
	padding: 24rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	background: #F8F8F8;
	color: #465CFF;
	font-weight: bold;
}

指定内容范围

通过 range 属性设置是否指定内容范围（内容滑出屏幕后sticky元素跟随滑出屏幕），将内容放置插槽 content 中。

  <template v-for="(item, index) in 10" :key="index">
    <wui-sticky range>
      <view class="wui-title">{{ item }} 头小毛🫏</view>
      <template v-slot:content>
        <wui-list-cell>我有一头小毛🫏</wui-list-cell>
        <wui-list-cell>我有一头小毛🫏</wui-list-cell>
        <wui-list-cell>我有一头小毛🫏</wui-list-cell>
        <wui-list-cell>我有一头小毛🫏</wui-list-cell>
        <wui-list-cell>我有一头小毛🫏</wui-list-cell>
        <wui-list-cell>我有一头小毛🫏</wui-list-cell>
        <wui-list-cell>我有一头小毛🫏</wui-list-cell>
        <wui-list-cell>我有一头小毛🫏</wui-list-cell>
        <wui-list-cell>我有一头小毛🫏</wui-list-cell>
        <wui-list-cell>我有一头小毛🫏</wui-list-cell>
        <wui-list-cell>我有一头小毛🫏</wui-list-cell>
      </template>
    </wui-sticky>
  </template>

.wui-title {
	width: 100%;
	height: 72rpx;
	background: #e1e1e1;
	display: flex;
	align-items: center;
	padding: 0 32rpx;
	box-sizing: border-box;
	font-size: 28rpx;
}

Slots

插槽名称	说明
default	sticky内容，滚动到顶部时固定于顶部的内容
content	当 range 属性设置true时使用，将内容放置该插槽内

Props

注意：百度，QQ，字节小程序在 属性 range 为 false 时必须传 scrollTop 值。

属性名	类型	说明	默认值	平台差异说明
top	Number, String	sticky元素固定时距离顶部的距离，单位px	0	-
range	Boolean	是否仅在指定的内容范围内吸顶，当内容滑出屏幕后sticky元素跟随滑出屏幕，内容需放置插槽 content 内	false	-
scrollTop	Number	页面在垂直方向已滚动的距离（单位px），通过页面生命周期 onPageScroll 获取（Nvue暂不支持），当需要获取元素是否吸顶时传值（百度，QQ，字节小程序在 range 为 false 时必须传值）	0	Nvue端可使用App-Nvue专用组件，如 list
zIndex	Number, String	吸顶元素层级z-index值	999	Nvue端不支持，默认越靠后的元素层级越高
width	Number, String	组件宽度，单位rpx	750	仅Nvue端支持
param	Number, String	自定义参数	0	-

Events

事件名	说明	回调参数
@sticky	sticky元素吸顶或者脱离顶部时触发，当传入scrollTop 属性值时有效	{ isFixed:是否吸顶, param:自定义参数 }