WeChat gadget extension components and sticky layout components

May 21, 2021 WeChat Mini Program Development Document

sticky

Sticky layout components. Sticky components work in the same way as the position:sticky property in CSS, and are arranged in a normal layout when the components are in the screen range, and always fixed to the top of the screen when the components roll out of the screen range.

The list of properties

Property	Type	The default	Required	Description
offset-top	Number	0	Whether	The distance from the top at the top, in px
z-index	Number	99	Whether	z-index at the top
container	function	Null	Whether	A function that returns the NodesRef node for the container
disabled	Boolean	false	Whether	Whether to disable
bindscroll	eventhandle		Whether	Triggered when scrolling, s scrollTop: distance from top position, isFixed: whether to ceiling . . .

Code demo

Ceiling distance

The offset-top property allows you to set the distance between the component and the top when the ceiling is reached

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

Specify the container

The container property specifies the container of the component, which remains within the container range as the page scrolls, and returns to its original position when the component is about to go beyond the bottom of the 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')
    })
  }
})