Sticky 吸顶容器

用于将标题栏在滚动时固定到页面顶部。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Sticky",
  3.     "usingComponents": {
  4.         "wux-sticky": "../../dist/sticky/index",
  5.         "wux-sticky-item": "../../dist/sticky-item/index"
  6.     }
  7. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Sticky</view>
  4.         <view class="page__desc">吸顶容器</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <wux-sticky scrollTop="{{ scrollTop }}">
  8.             <wux-sticky-item>
  9.                 <view slot="title">小鸡 ?</view>
  10.                 <view slot="content">
  11.                     <view class="demo-item">你看哪里有个小鸡呦</view>
  12.                     <view class="demo-item">你看那里他有小鸡哟</view>
  13.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  14.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  15.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  16.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  17.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  18.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  19.                 </view>
  20.             </wux-sticky-item>
  21.             <wux-sticky-item>
  22.                 <view slot="title">母鸡 ?</view>
  23.                 <view slot="content">
  24.                     <view class="demo-item">你看那里又有母鸡哟</view>
  25.                     <view class="demo-item">你看那里又有母鸡哟</view>
  26.                     <view class="demo-item">母鸡咯咯咯咯咯咯-go-</view>
  27.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  28.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  29.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  30.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  31.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  32.                 </view>
  33.             </wux-sticky-item>
  34.             <wux-sticky-item>
  35.                 <view slot="title">公鸡 ?</view>
  36.                 <view slot="content">
  37.                     <view class="demo-item">你看那里又有公鸡哟</view>
  38.                     <view class="demo-item">你看那里又有公鸡哟</view>
  39.                     <view class="demo-item">公鸡喔喔喔喔喔-wo-</view>
  40.                     <view class="demo-item">母鸡咯咯咯咯咯咯-go-</view>
  41.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  42.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  43.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  44.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  45.                 </view>
  46.             </wux-sticky-item>
  47.             <wux-sticky-item>
  48.                 <view slot="title">火鸡 ?</view>
  49.                 <view slot="content">
  50.                     <view class="demo-item">你看那里又有火鸡哟</view>
  51.                     <view class="demo-item">你看那里又有火鸡哟</view>
  52.                     <view class="demo-item">火鸡嘟嘟嘟嘟嘟-du-</view>
  53.                     <view class="demo-item">公鸡喔喔喔喔喔-wo-</view>
  54.                     <view class="demo-item">母鸡咯咯咯咯咯咯-go-</view>
  55.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  56.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  57.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  58.                 </view>
  59.             </wux-sticky-item>
  60.             <wux-sticky-item>
  61.                 <view slot="title">鸽子 ?</view>
  62.                 <view slot="content">
  63.                     <view class="demo-item">你看那里又有鸽子哟</view>
  64.                     <view class="demo-item">你看那里又有鸽子哟</view>
  65.                     <view class="demo-item">鸽子图噜噜噜噜-lu-</view>
  66.                     <view class="demo-item">火鸡嘟嘟嘟嘟嘟-du-</view>
  67.                     <view class="demo-item">公鸡喔喔喔喔喔-wo-</view>
  68.                     <view class="demo-item">母鸡咯咯咯咯咯咯-go-</view>
  69.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  70.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  71.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  72.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  73.                 </view>
  74.             </wux-sticky-item>
  75.             <wux-sticky-item>
  76.                 <view slot="title">猫咪 ?</view>
  77.                 <view slot="content">
  78.                     <view class="demo-item">你看那里又有猫咪哟</view>
  79.                     <view class="demo-item">你看那里又有猫咪哟</view>
  80.                     <view class="demo-item">猫咪喵喵喵喵喵-miao-</view>
  81.                     <view class="demo-item">鸽子图噜噜噜噜-lu-</view>
  82.                     <view class="demo-item">火鸡嘟嘟嘟嘟嘟-du-</view>
  83.                     <view class="demo-item">公鸡喔喔喔喔喔-wo-</view>
  84.                     <view class="demo-item">母鸡咯咯咯咯咯咯-go-</view>
  85.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  86.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  87.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  88.                 </view>
  89.             </wux-sticky-item>
  90.             <wux-sticky-item>
  91.                 <view slot="title">小狗 ?</view>
  92.                 <view slot="content">
  93.                     <view class="demo-item">你看那里又有小狗哟</view>
  94.                     <view class="demo-item">你看那里又有小狗哟</view>
  95.                     <view class="demo-item">小狗旺旺旺旺旺-wang-</view>
  96.                     <view class="demo-item">猫咪喵喵喵喵喵-miao-</view>
  97.                     <view class="demo-item">鸽子图噜噜噜噜-lu-</view>
  98.                     <view class="demo-item">火鸡嘟嘟嘟嘟嘟-du-</view>
  99.                     <view class="demo-item">公鸡喔喔喔喔喔-wo-</view>
  100.                     <view class="demo-item">母鸡咯咯咯咯咯咯-go-</view>
  101.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  102.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  103.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  104.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  105.                 </view>
  106.             </wux-sticky-item>
  107.             <wux-sticky-item>
  108.                 <view slot="title">山羊 ?</view>
  109.                 <view slot="content">
  110.                     <view class="demo-item">你看那里又有山羊哟</view>
  111.                     <view class="demo-item">你看那里又有山羊哟</view>
  112.                     <view class="demo-item">山羊咩-mie-</view>
  113.                     <view class="demo-item">小狗旺旺旺旺旺-wang-</view>
  114.                     <view class="demo-item">猫咪喵喵喵喵喵-miao-</view>
  115.                     <view class="demo-item">鸽子图噜噜噜噜-lu-</view>
  116.                     <view class="demo-item">火鸡嘟嘟嘟嘟嘟-du-</view>
  117.                     <view class="demo-item">公鸡喔喔喔喔喔-wo-</view>
  118.                     <view class="demo-item">母鸡咯咯咯咯咯咯-go-</view>
  119.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  120.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  121.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  122.                 </view>
  123.             </wux-sticky-item>
  124.             <wux-sticky-item>
  125.                 <view slot="title">绵羊 ?</view>
  126.                 <view slot="content">
  127.                     <view class="demo-item">你看那里又有绵羊哟</view>
  128.                     <view class="demo-item">你看那里又有绵羊哟</view>
  129.                     <view class="demo-item">绵羊咇-bie</view>
  130.                     <view class="demo-item">山羊咩-mie</view>
  131.                     <view class="demo-item">小狗旺旺旺旺旺-wang-</view>
  132.                     <view class="demo-item">猫咪喵喵喵喵喵-miao-</view>
  133.                     <view class="demo-item">鸽子图噜噜噜噜-lu-</view>
  134.                     <view class="demo-item">火鸡嘟嘟嘟嘟嘟-du-</view>
  135.                     <view class="demo-item">公鸡喔喔喔喔喔-wo-</view>
  136.                     <view class="demo-item">母鸡咯咯咯咯咯咯-go-</view>
  137.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  138.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  139.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  140.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  141.                 </view>
  142.             </wux-sticky-item>
  143.             <wux-sticky-item>
  144.                 <view slot="title">母牛 ?</view>
  145.                 <view slot="content">
  146.                     <view class="demo-item">你看那里又有母牛哟</view>
  147.                     <view class="demo-item">你看那里又有母牛哟</view>
  148.                     <view class="demo-item">母牛萌-meng-</view>
  149.                     <view class="demo-item">绵羊咇-bie</view>
  150.                     <view class="demo-item">山羊咩-mie</view>
  151.                     <view class="demo-item">小狗旺旺旺旺旺-wang-</view>
  152.                     <view class="demo-item">猫咪喵喵喵喵喵-miao-</view>
  153.                     <view class="demo-item">鸽子图噜噜噜噜-lu-</view>
  154.                     <view class="demo-item">火鸡嘟嘟嘟嘟嘟-du-</view>
  155.                     <view class="demo-item">公鸡喔喔喔喔喔-wo-</view>
  156.                     <view class="demo-item">母鸡咯咯咯咯咯咯-go-</view>
  157.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  158.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  159.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  160.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  161.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  162.                 </view>
  163.             </wux-sticky-item>
  164.             <wux-sticky-item>
  165.                 <view slot="title">公牛 ?</view>
  166.                 <view slot="content">
  167.                     <view class="demo-item">你看那里又有公牛哟</view>
  168.                     <view class="demo-item">你看那里又有公牛哟</view>
  169.                     <view class="demo-item">公牛呣-mu-</view>
  170.                     <view class="demo-item">母牛萌-meng-</view>
  171.                     <view class="demo-item">绵羊咇-bie</view>
  172.                     <view class="demo-item">山羊咩-mie</view>
  173.                     <view class="demo-item">小狗旺旺旺旺旺-wang-</view>
  174.                     <view class="demo-item">猫咪喵喵喵喵喵-miao-</view>
  175.                     <view class="demo-item">鸽子图噜噜噜噜-lu-</view>
  176.                     <view class="demo-item">火鸡嘟嘟嘟嘟嘟-du-</view>
  177.                     <view class="demo-item">公鸡喔喔喔喔喔-wo-</view>
  178.                     <view class="demo-item">母鸡咯咯咯咯咯咯-go-</view>
  179.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  180.                     <view class="demo-item">小鸡哔哔-bi-哟</view>
  181.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  182.                     <view class="demo-item">小鸡哔哔哔哔-bi-哟</view>
  183.                 </view>
  184.             </wux-sticky-item>
  185.             <wux-sticky-item>
  186.                 <view slot="title">拖拉机 ?</view>
  187.                 <view slot="content">
  188.                     <view class="demo-item">你看那里又有拖拉机哟</view>
  189.                     <view class="demo-item">你看那里又有拖拉机哟</view>
  190.                     <view class="demo-item">拖拉机嗡-weng-</view>
  191.                     <view class="demo-item">拖拉机嗡-weng-</view>
  192.                     <view class="demo-item">拖拉机嗡-weng-</view>
  193.                     <view class="demo-item">小鸡被撞 喔 啊喔</view>
  194.                 </view>
  195.             </wux-sticky-item>
  196.         </wux-sticky>
  197.     </view>
  198. </view>
  1. Page({
  2.     data: {
  3.         scrollTop: 0,
  4.     },
  5.     onPageScroll(e){
  6.         console.log('onPageScroll', e.scrollTop)
  7.         this.setData({
  8.             scrollTop: e.scrollTop,
  9.         })
  10.     },
  11. })

视频演示

Sticky

API

Sticky props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-sticky
scrollTop number 设置竖向滚动条位置 0

Sticky externalClasses

名称 描述
wux-class 根节点样式类

StickyItem props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-sticky-item
title string 标题 -
content string 内容 -

StickyItem slot

名称 描述
title 自定义标题
content 自定义内容

StickyItem externalClasses

名称 描述
wux-class 根节点样式类