ThorUI文档

# tui-sticky 吸顶容器

介绍

Sticky吸顶容器，支持设置吸顶容器距离顶部距离，支持异步加载。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiSticky from "@/components/thorui/tui-sticky/tui-sticky.vue"
export default {
	components:{
		tuiSticky
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 √ √ √ √ √ √ √

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-sticky": "/components/thorui/tui-sticky/tui-sticky"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基本用法

设置滚动条距离顶部距离 scrollTop（通过 onPageScroll 生命周期函数获取），吸顶容器高度 stickyHeight 。

<!--uni-app-->
<tui-sticky :scrollTop="scrollTop" stickyHeight="80rpx">
	<template v-slot:header>
		<view class="tui-tag">基本用法</view>
	</template>
</tui-sticky>

<!--微信小程序-->
<tui-sticky scrollTop="{{scrollTop}}" stickyHeight="80rpx">
	<view slot="header">
		<view class="tui-tag">基本用法</view>
	</view>
</tui-sticky>
吸顶距离

通过 stickyTop 属性设置吸顶时与顶部的距离。

<!--uni-app-->
<tui-sticky :scrollTop="scrollTop" :stickyTop="stickyTop" stickyHeight="80rpx">
	<template v-slot:header>
		<view class="tui-center">
			<view class="tui-tag tui-green">吸顶距离</view>
		</view>
	</template>
</tui-sticky>

<!--微信小程序-->
<tui-sticky scrollTop="{{scrollTop}}" stickyTop="{{stickyTop}}" stickyHeight="80rpx">
	<view class="tui-center" slot="header">
	  <view class="tui-tag tui-green">吸顶距离</view>
	</view>
</tui-sticky>
指定容器

内容放置插槽 content 内，页面滚动时，组件会始终保持在容器范围内。

<!--uni-app-->
<tui-sticky :scrollTop="scrollTop" stickyHeight="80rpx" container>
	<template v-slot:header>
		<view class="tui-right">
			<view class="tui-tag tui-danger">指定容器</view>
		</view>
	</template>
	<template v-slot:content>
		<view class="tui-box">
			容器内容
		</view>
	</template>
</tui-sticky>

<!--微信小程序-->
<tui-sticky scrollTop="{{scrollTop}}" stickyHeight="80rpx" container>
	<view slot="header">
		<view class="tui-right">
			<view class="tui-tag tui-danger">指定容器</view>
		</view>
	</view>
	<view slot="content">
		<view class="tui-box">
			容器内容
		</view>
	</view>
</tui-sticky>

# Slots

名称 说明
header 吸顶容器内显示内容
content 当吸顶容器设置为指定容器时，内容放置此插槽内

# Props

参数 类型 说明 默认值
scrollTop Number 滚动条距离顶部距离 -
stickyTop [Number, String] 吸顶时与顶部的距离，单位px H5:44，其他:0
container Boolean 是否指定容器，即内容放置插槽content内 false
isNativeHeader Boolean 是否是原生自带header true
stickyHeight String 吸顶容器 高度 rpx auto
backgroundColor String 占位容器背景颜色 transparent
recalc Number 是否重新计算[有异步加载时使用,设置大于0的数] 0
index [Number, String] 列表中的索引值 0

# Events

事件名 说明 回调参数
sticky 是否已经吸顶 {
  isFixed: Boolean, //是否吸顶
  index: Number //列表中的索引值
}
change 元吸顶容器距顶部距离发生变化时触发 {
  top:Number, //距离顶部距离 px
  index: Number //列表中的索引值
}

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-keyboard 数字键盘 →