粘性布局

介绍

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();
	},
}

Props

Events

Slots