# 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示例小程序码 |