返回介绍

开发指南

组件

JS

模板

Sticky 吸顶

发布于 2021-04-03 05:35:23 字数 2635 浏览 1089 评论 0 收藏 0

Sticky 吸顶 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序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吸顶时与顶部的距离,单位rpxString | Number0-
index自定义标识,用于区分是哪一个组件String | Number--
enable是否开启吸顶功能Booleantruefalse
bg-color组件背景颜色String#ffffff-
z-index吸顶时的z-indexString | Number970-
h5-nav-height导航栏高度,自定义导航栏时(无导航栏时需设置为0),需要传入此值,单位pxString | Number44-

Event

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文