Tuniao UI

Sticky 吸顶

该组件内部实现以uni-appbutton组件为基础，进行了二次封装。

特别提示

在由于右侧的演示是通过iframe引入的，PC端无法正常操作，请在真机演示中查看效果。

注意

此组件内部使用uni-app组件为基础，暴露出来的props基本和官方组件保持一致，不同的平台会有不同的限制，具体可以参考uni-app的官方文档：uni-app官方button组件

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

通过slot，将需要吸顶的内容放在Sticky组件中即可，slot中只能有一个根元素。

注意

由于页面依赖相关的原因的，部分页面会出现Cannot read property 'bottom' of null的报错.

产生问题原因：

sticky组件创建了Observer监听，当切换页面且页面没有销毁（例如：tabbar页面）， sticky组件也没有销毁，自然beforeDestroy没有生效，导致组件仍然保持监听，所以出现Cannot read property 'bottom' of null报错。所以我们需要手动断开监听来解决这个报错，如果这个报错影响到了您。

解决办法：

可以在隐藏当前页面的时候将enabled设置为false，然后在显示当前页面的时候将enabled设置为true。

vue

<template>
  <view class="container">
    <tn-sticky>
      <!-- 只能有一个根元素 -->
       <view class="sticky-content">图鸟科技</view>
    </tn-sticky>
  </view>
</template>

设置吸顶距离

可以通过offsetTop来设置吸顶时与顶部的距离。

vue

<tn-sticky :offsetTop="100">
  <!-- 只能有一个根元素 -->
  <view class="sticky-content">图鸟科技</view>
</tn-sticky>

API

Props

属性名	说明	类型	默认值	可选值
index	用于区分多个吸顶容器的自定义标识	String\|Number	-	-
offsetTop	吸顶时距离顶部的距离，单位rpx	Number	0	-
h5NavHeight	H5顶部导航栏的高度	Number	45	-
customNavHeight	自定义导航栏的高度，在非H5下生效，在小程序端使用了自定义顶部的时候需要设置该参数	Number	0	-
enabled	开启吸顶	Boolean	true	false
backgroundColor	吸顶容器背景颜色	String	#FFFFFF	-
zIndex	吸顶容器z-index值	Number	19075	-

Slots

名称	说明
default	吸顶容器内的内容

Event

事件名称	说明	回调参数
fixed	组件吸顶时触发	index: 组件的标识`index`
unfixed	组件取消吸顶时触发	index: 组件的标识`index`

Sticky 吸顶 ​

平台差异说明 ​

基本使用 ​

设置吸顶距离 ​

API ​

Props ​

Slots ​

Event ​