粘性布局 Sticky

Sticky 组件与 CSS 中 position: sticky 属性实现的效果一致。可切换 css 模式和 js 模式，纯 css 模式不适用的情况可以采用 js 模式， js 模式采用 IntersectionObserver Api。

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-sticky": "@titian-design/weapp/sticky/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-sticky": "platform://titian-mp/ti-sticky"
  }
}

用法示例

基础用法

基础吸顶

copy

code

<ti-sticky>
  <ti-button>基础吸顶</ti-button>
</ti-sticky>

吸顶距离

基础吸顶

copy

code

<ti-sticky offsetTop="{{20}}">
  <ti-button>基础吸顶</ti-button>
</ti-sticky>

指定容器

基础吸顶

• App.wxml
• index.js

code

copy

code

<view id="custom-container" style="height: 250rpx;">
  <ti-sticky container="{{ container }}">
    <ti-button>指定容器</ti-button>
  </ti-sticky>
</view>

copy

code

Page({
  data: {
    container: null,
  },
  onReady() {
    this.setData({
      container: () => wx.createSelectorQuery().select('#container'),
    });
  },
});

ti-sticky API

属性 Properties

名称	类型	必填	默认值	说明	备注
offset-top	number	否	0	吸顶时与顶部的距离，单位 px	-
container	function	否	-	一个函数，返回容器对应的 NodesRef 节点	-
disabled	boolean	否	false	是否禁止吸顶	-
z-index	number	否	99	z-index	-
use-pure-css	boolean	否	false	使用css的position: sticky实现	-

事件 Events

名称	参数列表	描述	备注
bind:fixed	(e: WechatMiniprogram.CustomEvent<{isFixed: boolean}>) => void	在吸顶状态改变是触发	-

插槽 Slots

名称	说明	备注
default	默认插槽	-