(小程序篇)20.吸顶容器

说明：结合lin-ui完成吸顶操作，使用css模式，UI流畅度比较好

1.引入组件

.json

{
  "usingComponents": {
    "l-sticky": "../../miniprogram_npm/lin-ui/sticky",
    "l-sticky-item": "../../miniprogram_npm/lin-ui/sticky-item"
  }
}

2.页面标签

.wxml

<l-sticky scrollTop="{{scrollTop}}" mode="css">
  <l-sticky-item top="0">
    <view class="header" slot="header">
      <view class="title">吸顶头部</view>
    </view>
    <view class="main" slot="body">
      <image src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74eff212291547999472bdc563a37f4e~tplv-k3u1fbpfcp-zoom-1.image"></image>
      <image src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4490ca0f61f1442f8cbd478b1c4afafa~tplv-k3u1fbpfcp-zoom-1.image"></image>
      <image src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c1d53c9216e4ab6b08ce36e5d65239a~tplv-k3u1fbpfcp-zoom-1.image"></image>
      <image src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b30ae2f0659648a98fb12b2b391780b2~tplv-k3u1fbpfcp-zoom-1.image"></image>
      <image src="//p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37c53fd5015a4217828286fa1f3693c9~tplv-k3u1fbpfcp-zoom-1.image"></image>
    </view>
  </l-sticky-item>
</l-sticky>

3.页面样式

.wxss

.header{
  background: #ffffff;
  border-bottom:1rpx solid #e3e3e3;
  height: 90rpx;
  line-height: 90rpx;
}
.header .title{
  padding-left: 30rpx;
}
.main{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main image{
  width:600rpx;
  height:300rpx;
  border-radius: 30rpx;
  margin-top: 20rpx;
}

4.效果展示