微信小程序 擴(kuò)展組件·粘性布局組件

sticky

粘性布局組件。Sticky 組件與 CSS 中 position: sticky 屬性實(shí)現(xiàn)的效果一致，當(dāng)組件在屏幕范圍內(nèi)時，會按照正常的布局排列，當(dāng)組件滾出屏幕范圍時，始終會固定在屏幕頂部。

屬性列表

代碼演示

吸頂距離

通過 offset-top 屬性可以設(shè)置組件在吸頂時與頂部的距離

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

指定容器

通過 container 屬性可以指定組件的容器，頁面滾動時，組件會始終保持在容器范圍內(nèi)，當(dāng)組件即將超出容器底部時，會返回原位置。

<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')
    })
  }
})