吸顶容器 Sticky

吸顶容器，常见应用场景为吸顶菜单、索引选择器

吸顶容器需要sticky和sticky-item组件关联使用

sticky-item包括头部header和body两个部分，通过slot注入

页面垂直滑动距离（必填）

因为组件内部无法获取页面垂直滑动距离，所以需要在sticky组件上通过属性scroll-top传入

属性传值示例代码

<!-- 页面wxml文件 -->
<l-sticky scrollTop="{{scrollTop}}">
  <l-sticky-item>
    <view slot="header">吸顶菜单</view>
    <view slot="body">内容部分</view>
  </l-sticky-item>
</l-sticky>

// 页面js文件
Page({
  data: {
    // 页面垂直滑动的距离
    scrollTop: undefined
  },
  onPageScroll(res) {
    this.setData({
      scrollTop: res.scrollTop
    })
  }
})

wx.lin传值示例代码

提示

• 若一个页面中仅使用了一个sticky组件，可采用wx.lin.setScrollTop(scrollTop)方式传入scrollTop值。该方式在一定程度上可以优化性能。

<!-- 页面wxml文件 -->
<l-sticky>
  <l-sticky-item>
    <view slot="header">吸顶菜单</view>
    <view slot="body">内容部分</view>
  </l-sticky-item>
</l-sticky>

// 页面js文件
Page({
  onPageScroll(res) {
    wx.lin.setScrollTop(res.scrollTop)
  }
})

渲染模式

sticky组件拥有js和css两种渲染模式，通过mode属性指定，默认值为css

两者区别

• css模式UI流畅度优于js模式，适合对交互体验要求较高的场景，但不支持事件监听，并且部分机型不支持（此时会回滚js模式）
• js模式在滑动过快的情况下，吸顶容器会闪烁，但支持linsticky和linunsticky事件监听，适合复杂业务场景

吸顶位置

在sticky-item组件上设置top属性（单位rpx），指定吸顶容器吸附点距离视窗顶部的距离，默认为0，即吸附到视窗顶部

示例代码

<l-sticky scrollTop="{{scrollTop}}">
  <l-sticky-item top="10">
    <view slot="header">吸顶菜单</view>
    <view slot="body">内容部分</view>
  </l-sticky-item>
    <l-sticky-item top="20">
    <view slot="header">吸顶菜单</view>
    <view slot="body">内容部分</view>
  </l-sticky-item>
</l-sticky>

动态修改内容

在某些场景下sticky-item的内容会增加/减少，如：上拉加载更多，此时需要主动调用wx.lin.flushSticky()方法刷新吸顶容器的宽高数据，否则会造成吸顶位置错乱。

示例代码

 fetchData(){
     // 从服务端获取数据
    let data = http.fetchData()
    // 设置数据
    this.setData({
        listData:data
    })
    // 刷新sticky容器
    wx.lin.flushSticky()
  }

吸顶容器属性（Sticky Attributes）

吸顶容器子项属性（StickyItem Attributes）

吸顶容器外部样式类（Sticky ExternalClasses）

吸顶容器子项外部样式类（StickyItem ExternalClasses）

吸顶容器事件（Sticky Events）

吸顶容器wx.lin方法（Sticky wx.lin Function）

吸顶容器子项插槽（Sticky-item Slot）