sticky

粘性布局组件。Sticky 组件与 CSS 中 position: sticky 属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

安装

  1. npm install @miniprogram-component-plus/sticky

在页面 page.json 中

  1. // page.json
  2. {
  3.     "usingComponents": {
  4.         "mp-sticky": "@miniprogram-component-plus/sticky"
  5.     }
  6. }

属性列表

属性类型默认值必填说明
offset-topNumber0否吸顶时与顶部的距离，单位px
z-indexNumber99否吸顶时的 z-index
containerfunctionnull否一个函数，返回容器对应的 NodesRef 节点
disabledBooleanfalse否是否禁用
bindscrolleventhandle否滚动时触发，{scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

示例代码

在开发者工具中预览效果

代码演示

吸顶距离

通过 offset-top 属性可以设置组件在吸顶时与顶部的距离

  1. <mp-sticky offset-top="32">
  2.   <button size="mini" type="primary" style="margin-left: 115px; background-color: #1989fa">吸顶距离</button>
  3. </mp-sticky>

指定容器

通过 container 属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。

  1. <view id="container" style="height: 250px; background-color: #E0E0E0;">
  2.   <view style="height: 100px; background-color: #FFFF99;"></view>
  3.   <mp-sticky container="{{container}}" offset-top="64">
  4.     <button size="mini" type="primary" style="margin-left: 215px; background-color: #ff976a">指定容器</button>
  5.   </mp-sticky>
  6. </view>
  1. Page({
  2.   data: {
  3.     container: null
  4.   },
  6.   onReady() {
  7.     this.setData({
  8.       container: () => wx.createSelectorQuery().select('#container')
  9.     })
  10.   }
  11. })