粘性布局

介绍

Sticky 组件与 CSS 中position: sticky属性实现的效果一致,当组件在屏幕范围内时,会按照正常的布局排列,当组件滚出屏幕范围时,始终会固定在屏幕顶部。

代码演示

基础用法

将内容包裹在 Sticky 组件内即可。

<z-sticky>
	<z-button type="primary">
		基础用法
	</z-button>
</z-sticky>

吸顶距离

通过 offset-top 属性可以设置组件在吸顶时与顶部的距离。

<z-sticky :offset-top="150">
	<z-button type="info">
		吸顶距离
	</z-button>
</z-sticky>

指定容器

<z-sticky :container="container">
	<z-button type="warning" :custom-style="{marginLeft:'300rpx'}">
		指定容器
	</z-button>
</z-sticky>
data() {
	return {
		container: '',
	}
},
mounted() {
	const query = uni.createSelectorQuery();
	query.select('#container').boundingClientRect(data => {
		this.container = data;
	}).exec();
},

在 scroll-view 内使用

<scroll-view @scroll="onScroll" scroll-y id="scroller" style="height: 400rpx;">
	<view style="height: 800rpx; padding-top: 50px;">
		<z-sticky :scroll-top="scrollTop" :offset-top="offsetTop">
			<z-button type="danger">
				嵌套在 scroll-view 内
			</z-button>
		</z-sticky>
	</view>
</scroll-view>
data() {
	return {
		scrollTop: 0,
		offsetTop: 0,
	}
},
methods: {
	onScroll(event) {
		uni.createSelectorQuery()
			.select('#scroller')
			.boundingClientRect((res) => {
				this.scrollTop = event.detail.scrollTop;
				this.offsetTop = res.top;
			})
			.exec();
	},
}

API

Props

参数 说明 类型 可选值 默认值
z-index 吸顶时的 z-index number 99
offset-top 吸顶时与顶部的距离,默认 rpx number 0
disabled 是否禁用吸顶 boolean false
container null -
scroll-top null -
h5-nav-height h5 顶部导航栏的高度 number|string 44

Events

事件名 回调参数 说明
scroll event object - { scrollTop: number, isFixed: boolean } 滚动时触发

Slots

名称 说明 Bindings
default 默认插槽