sticky-header

组件类型：UniStickyHeaderElement

吸顶布局容器

注意：暂时仅支持作为list-view、sticky-section的子节点, sticky-header不支持css样式！当一个容器视图设置多个sticky-header时，后一个sticky-header会停靠在前一个sticky-header的末尾处。

sticky-header 兼容性

Android	iOS	web
3.93	4.11	4.02

属性

名称	类型	默认值	描述
padding	array<number>	[0,0,0,0]	长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距

sticky-header使用场景

1. 父元素滚动过程中，某个元素有固定到父元素顶部的需求

   需求其实就是元素吸顶。可将需要吸顶元素放入sticky-header组件中，sticky-header组件作为父元素的子元素，放到吸顶元素原来的位置即可。

   示例：

   <list-view id="list-view" style="flex: 1; background-color: #f5f5f5;">
   	<sticky-header>
   		<!-- 固定到父元素顶部的元素 -->
   		<text style="padding: 20px; background-color: #f5f5f5;">向上滑动页面，体验sticky-header吸顶效果。</text>
   	</sticky-header>
   	<list-item v-for="index in 20" :key="index" style="padding: 15px; margin: 5px 0;background-color: #fff;border-radius: 5px;">
   		<text class="text">itme-content-{{index}}</text>
   	</list-item>
   </list-view>
   

注意

• sticky-header组件不支持css。仅支持padding属性控制子元素位置。其他排版需求要交给子元素实现
• 同时存在多sticky-header组件请使用sticky-section组件充当父容器控制吸顶业务

sticky-header 属性兼容性

	Android	iOS	web
padding	3.98	4.11	4.02

示例

hello uni-app x

Template

Script

<template>
  <list-view :scroll-y="true" class="page" rebound="false" show-scrollbar=false :scroll-top="scroll_top_input"
    :refresher-enabled="refresher_enabled_boolean" :refresher-triggered="refresher_triggered_boolean"
    @refresherrefresh="list_view_refresherrefresh">
    <list-item type=1>
      <swiper indicator-dots="true" circular="true">
        <swiper-item v-for="i in 3" :item-id="i + ''">
          <image src="/static/shuijiao.jpg" style="height: 240px; width: 100%;"></image>
          <text style="position: absolute;">{{i}}</text>
        </swiper-item>
      </swiper>
    </list-item>
    <list-item class="content-item" type=2>
      <text class="text">向上滑动页面，体验sticky-header吸顶效果。</text>
    </list-item>
    <sticky-header>
      <scroll-view style="background-color: #f5f5f5; flex-direction: row;" direction="horizontal"
        :show-scrollbar="false">
        <view style="align-self: flex-start; flex-direction: row;">
          <text ref="swipertab" class="sift-item" v-for="(name,index) in sift_item" @click="clickTH(index)">
            {{name}}
          </text>
        </view>
      </scroll-view>
    </sticky-header>

    <list-item v-for="(item,index) in list_item" :key="index" class="content-item" type=3>
      <text class="text">{{item}}</text>
    </list-item>
  </list-view>
</template>



<style>
  .page {
    flex: 1;
    background-color: #f5f5f5;
  }

  .content-item {
    padding: 15px;
    margin-bottom: 10px;
    background-color: #fff;
  }

  .text {
    font-size: 14px;
    color: #666;
    line-height: 20px;
  }

  .sift-item {
    color: #555;
    font-size: 16px;
    padding: 12px 15px;
  }
</style>

参见

• 相关 Bug

sticky-section

组件类型：UniStickySectionElement

吸顶布局容器

注意：暂时仅支持作为list-view的子节点, sticky-section不支持css样式！

sticky-section 兼容性

Android	iOS	web
3.98	4.11	4.02

属性

名称	类型	默认值	描述
push-pinned-header	boolean	true	sticky-section元素重叠时是否继续上推
padding	array<number>	[0,0,0,0]	长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距

sticky-section使用场景

1. 父元素滚动过程中，多个元素有固定到父元素顶部的需求。

   父元素中多个元素吸顶需要使用sticky-section组件。sticky-section组件作为sticky-header组件的父容器。sticky-section组件会控制子元素的滚动吸顶业务。sticky-section组件之间可通过push-pinned-header属性控制吸顶重叠时是否上推。

   示例：

   <list-view id="list-view" style="flex: 1; background-color: #f5f5f5;">
   	<sticky-section v-for="sectionId in 3" :id="sectionId" push-pinned-header=false>
   		<sticky-header>
   			<text style="padding: 20px; background-color: #f5f5f5;">sticky-header吸顶--{{sectionId}}</text>
   		</sticky-header>
   		<list-item v-for="index in 20" :key="index" style="padding: 15px; margin: 5px 0;background-color: #fff;border-radius: 5px;">
   			<text class="text">itme-content-{{index}}</text>
   		</list-item>
   	</sticky-section>
   </list-view>
   

注意

• sticky-section组件支持存放多个sticky-header子组件，多个sticky-header滚动吸顶时，后一个sticky-header会停靠在前一个sticky-header的末尾处, 仅限于同一个sticky-section父容器。多个sticky-section吸顶停靠通过push-pinned-header控制。
• sticky-section组件是虚拟组件不会真实渲染。仅支持padding属性控制子元素位置。其他排版需求要交给子元素实现

sticky-section 属性兼容性

	Android	iOS	web
push-pinned-header	3.98	4.11	x
padding	3.98	4.11	4.02

示例

hello uni-app x

Template

Script

<template>
  <page-head title="sticky-section"></page-head>
  <list-view id="list-view" ref="list-view" show-scrollbar=false class="page" :scroll-into-view="scrollIntoView"
  @scroll="onScroll" @scrollend="onScrollEnd" rebound="false">
    <!-- #ifdef APP -->
    <list-item style="padding: 10px; margin: 5px 0;align-items: center;" :type = 20>
      <button @click="gotoStickyHeader('C')" size="mini">跳转到id为C的sticky-header位置上</button>
    </list-item>
    <!-- #endif -->
    <sticky-section v-for="(sectionText) in data" :padding="sectionPadding" :push-pinned-header="true">
      <sticky-header :header-id="sectionText" :id="sectionText">
        <text class="sticky-header-text">{{sectionText}}</text>
      </sticky-header>
      <list-item v-for="i in 10" class="content-item" :type=10>
        <text class="text">{{sectionText}}--item--content----{{i}}</text>
      </list-item>
    </sticky-section>
    <list-item style="padding: 10px; margin: 5px 0;align-items: center;" :type= 30>
      <!-- <text style="color: #aaa">到底了</text> -->
      <button @click="toTop" size="mini">回到顶部</button>
    </list-item>
  </list-view>
</template>



<style>
  .page {
    flex: 1;
    background-color: #f5f5f5;
  }

  .sticky-header-text {
    font-size: 16px;
    padding: 8px;
    color: #959595;
    background-color: #f5f5f5;
  }

  .content-item {
    padding: 15px;
    margin-bottom: 10px;
    background-color: #fff;
  }
</style>

参见

• 相关 Bug