本文整理自网络，侵删。

sticky

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

属性列表

属性	类型	默认值	必填	说明
offset-top	Number	0	否	吸顶时与顶部的距离，单位px
z-index	Number	99	否	吸顶时的 z-index
container	function	null	否	一个函数，返回容器对应的 NodesRef 节点
disabled	Boolean	false	否	是否禁用
bindscroll	eventhandle		否	滚动时触发，{scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

代码演示

吸顶距离

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

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

指定容器

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

<view id="container" style="height: 250px; background-color: #E0E0E0;">
  <view style="height: 100px; background-color: #FFFF99;"></view>
  <mp-sticky container="{{container}}" offset-top="64">
    <button size="mini" type="primary" style="margin-left: 215px; background-color: #ff976a">指定容器</button>
  </mp-sticky>
</view>

Page({
  data: {
    container: null
  },

  onReady() {
    this.setData({
      container: () => wx.createSelectorQuery().select('#container')
    })
  }
})

标签：微信小程序

相关阅读 >>

微信小程序api 图片-全屏预览图片

微信小程序云开发api 构造一个服务端时间的引用

微信小程序api 保留当前页面

微信小程序api 绘图

微信小程序运力方使用onorderquery

微信小程序云开发api 获取记录数据

微信小程序 weui确认页样式

微信小程序api nfc-ndef标签

微信小程序云开发服务端数据库api collection.skip

微信小程序注册程序 app()函数