Sticky 吸顶容器

概述

Sticky 吸顶容器，用于将标题栏在滚动时固定到页面顶部。

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

温馨提示

• 组件父元素不能使用overflow:hidden或者overflow:auto属性，且父元素的高度不能低于sticky元素的高度。

• sticky组件如果在scroll-view中使用，在scroll-view内套一个view。

• App-Nvue下如果列表使用的是weex自带组件，如 <list></list> ，则使用 <header></header> 组件代替sticky组件，或者在sticky组件外层套上 header 组件。

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiSticky from "@/components/firstui/fui-sticky/fui-sticky.vue"
export default {
	components:{
		fuiSticky
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。

基础使用

组件放置页面根目录下，且页面内容足够滚动。

<fui-sticky>
	<view class="fui-header">滑动页面查看效果</view>
</fui-sticky>

.fui-header {
	width: 100%;
	padding: 24rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	background: #F8F8F8;
	color: #465CFF;
	font-weight: bold;
}

指定内容范围

通过 range 属性设置是否指定内容范围（内容滑出屏幕后sticky元素跟随滑出屏幕），将内容放置插槽 content 中。

<fui-sticky range>
	<view class="fui-title">小鸡 ??</view>
	<template v-slot:content>
		<fui-list-cell>你看哪里有个小鸡呦</fui-list-cell>
		<fui-list-cell>你看哪里有个小鸡呦</fui-list-cell>
		<fui-list-cell>你看那里他有小鸡哟</fui-list-cell>
		<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
		<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
		<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
		<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
		<fui-list-cell>小鸡哔哔-bi-哟</fui-list-cell>
		<fui-list-cell>小鸡哔哔哔哔-bi-哟</fui-list-cell>
	</template>
</fui-sticky>

.fui-title {
	width: 100%;
	height: 72rpx;
	background: #e1e1e1;
	display: flex;
	align-items: center;
	padding: 0 32rpx;
	box-sizing: border-box;
	font-size: 28rpx;
}

Slots

插槽名称	说明
default	sticky内容，滚动到顶部时固定于顶部的内容
content	当 range 属性设置true时使用，将内容放置该插槽内

Props

注意：百度，QQ，字节小程序在 属性 range 为 false 时必须传 scrollTop 值。

属性名	类型	说明	默认值	平台差异说明
top	Number, String	sticky元素固定时距离顶部的距离，单位px	0	-
range	Boolean	是否仅在指定的内容范围内吸顶，当内容滑出屏幕后sticky元素跟随滑出屏幕，内容需放置插槽 content 内	false	-
scrollTop	Number	页面在垂直方向已滚动的距离（单位px），通过页面生命周期 onPageScroll 获取（Nvue暂不支持），当需要获取元素是否吸顶时传值（百度，QQ，字节小程序在 range 为 false 时必须传值）	0	Nvue端可使用App-Nvue专用组件，如 list
zIndex	Number, String	吸顶元素层级z-index值	999	Nvue端不支持，默认越靠后的元素层级越高
width	Number, String	组件宽度，单位rpx	750	仅Nvue端支持
param	Number, String	自定义参数	0	-

Events

事件名	说明	回调参数
@sticky	sticky元素吸顶或者脱离顶部时触发，当传入scrollTop 属性值时有效	{ isFixed:是否吸顶, param:自定义参数 }

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)