# 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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		scrollTop: 0
 	}
 },
 onLoad() {
 
 },
 methods: {

 },
 onPageScroll(e) {
 	this.scrollTop = e.scrollTop
 }
}

/* 样式 */
.tui-tag {
	width: 200rpx;
	height: 80rpx;
	margin-left: 30rpx;
	background-color: #5677fc;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6rpx;
}

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

// data 数据 及 方法
Page({
 data: {
   scrollTop: 0
 },
 //页面滚动执行方式
 onPageScroll(e) {
   this.setData({
     scrollTop: e.scrollTop
   })
 }
})

/* 样式 */
.tui-tag {
	width: 200rpx;
	height: 80rpx;
	margin-left: 30rpx;
	background-color: #5677fc;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6rpx;
}

// Make sure to add code blocks to your code group

吸顶距离

通过 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>

// uni-app  数据
export default {
 data() {
 	return {
 		scrollTop: 0,
 		stickyTop: uni.upx2px(80)
 	}
 },
 onLoad() {
 	//H5端如果使用了原生导航栏需要添加固定高度44
 	// #ifdef H5
 	this.stickyTop += 44;
 	// #endif
 },
 //页面滚动执行方式
 onPageScroll(e) {
 	this.scrollTop = e.scrollTop
 }
}

/* 样式 */
.tui-tag {
	width: 200rpx;
	height: 80rpx;
	margin-left: 30rpx;
	background-color: #5677fc;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6rpx;
}

.tui-green {
	background-color: #19be6b !important;
}
.tui-center {
	display: flex;
	justify-content: center;
}

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

// data 数据 及 方法
Page({
data: {
 scrollTop: 0,
 stickyTop: 40
},
onLoad() {
 setTimeout(() => {
   let top = wx.getSystemInfoSync().windowWidth / 750 * 80
   this.setData({
     stickyTop: top
   })
 }, 50)
},
//页面滚动执行方式
onPageScroll(e) {
 this.setData({
   scrollTop: e.scrollTop
 })
}
})

/* 样式 */
.tui-tag {
	width: 200rpx;
	height: 80rpx;
	margin-left: 30rpx;
	background-color: #5677fc;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6rpx;
}

.tui-green {
	background-color: #19be6b !important;
}
.tui-center {
	display: flex;
	justify-content: center;
}

// Make sure to add code blocks to your code group

指定容器

内容放置插槽 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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		scrollTop: 0
 	}
 },
 onPageScroll(e) {
 	this.scrollTop = e.scrollTop
 }
}

/* 样式 */
.tui-tag {
	width: 200rpx;
	height: 80rpx;
	margin-left: 30rpx;
	background-color: #5677fc;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6rpx;
}

.tui-danger {
	background-color: #EB0909 !important;
}

.tui-right {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
}

.tui-box {
	width: 100%;
	height: 300rpx;
	padding: 30rpx;
	box-sizing: border-box;
	background-color: #fff;
}

<!--微信小程序-->
<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>

// data 数据 及 方法
Page({
data: {
 scrollTop: 0
},
//页面滚动执行方式
onPageScroll(e) {
 this.setData({
   scrollTop: e.scrollTop
 })
}
})

/* 样式 */
.tui-tag {
	width: 200rpx;
	height: 80rpx;
	margin-left: 30rpx;
	background-color: #5677fc;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6rpx;
}

.tui-danger {
	background-color: #EB0909 !important;
}

.tui-right {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
}

.tui-box {
	width: 100%;
	height: 300rpx;
	padding: 30rpx;
	box-sizing: border-box;
	background-color: #fff;
}

// Make sure to add code blocks to your code group

# 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

注：uni-app端绑定事件使用@前缀，如@sticky；微信小程序原生使用bind前缀，如bindsticky

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