Question

Sticky 吸顶 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

通过slot，将需要吸顶的内容放在Sticky组件中即可，slot中只能有一个根元素

注意！

由于页面依赖相关的原因的，部分页面会出现Cannot read property 'bottom' of null的报错，可以参考 issue #239 进行处理。

<template>
	<view class="container">
		<u-sticky>
			<!-- 只能有一个根元素 -->
			<view class="sticky">
				宝剑锋从磨砺出,梅花香自苦寒来
			</view>
		</u-sticky>
	</view>
</template>

<style lang="scss" scoped>
	.container {
		height: 200vh;
		margin-top: 150rpx;
	}
	
	.sticky {
		width: 750rpx;
		height: 120rpx;
		background-color: #2979ff;
		color: #fff;
		padding: 24rpx;
	}
</style>

吸顶距离

通过offset-top参数设置组件在吸顶时与顶部的距离

<u-sticky offset-top="200">
	<view>
		塞下秋来风景异，衡阳雁去无留意
	</view>
</u-sticky>

API

Props

参数	说明	类型	默认值	可选值
offset-top	吸顶时与顶部的距离，单位rpx	String | Number	0	-
index	自定义标识，用于区分是哪一个组件	String | Number	-	-
enable	是否开启吸顶功能	Boolean	true	false
bg-color	组件背景颜色	String	#ffffff	-
z-index	吸顶时的z-index值	String | Number	970	-
h5-nav-height	导航栏高度，自定义导航栏时(无导航栏时需设置为0)，需要传入此值，单位px	String | Number	44	-

Event

事件名	说明	回调参数
fixed	组件吸顶时触发	index: 通过props传递的index
unfixed 1.5.6	组件取消吸顶时触发	index: 通过props传递的index