uView

# Sticky 吸顶

该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。

提示

由于右侧的演示是通过iframe标签引入的，缺少了手机端运行的相关API，所以吸顶是看不到效果的，手机端有不会这些问题，请在右上角的“演示”中用手机扫码查看对应的效果

# 平台差异说明

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

# 基本使用

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

注意！

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

<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 组件取消吸顶时触发 index: 通过props传递的index

← Waterfall 瀑布流 →