English
English
# sticky-header
Component Type：UniStickyHeaderElement
吸顶布局容器
注意：暂时仅支持作为list-view、sticky-section的子节点, sticky-header不支持css样式！当一个容器视图设置多个sticky-header时，后一个sticky-header会停靠在前一个sticky-header的末尾处。
# # Attributes
| name | type | default | description |
|---|---|---|---|
| padding | Array<Number> | [0,0,0,0] | 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |
# sticky-header使用场景
父元素滚动过程中，某个元素有固定到父元素顶部的需求
需求其实就是元素吸顶。可将需要吸顶元素放入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组件充当父容器控制吸顶业务
# # Example
<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;"></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;" :scroll-x="true" :scroll-y="false" :show-scrollbar="false">
<view class="flex-row" 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>
<script>
export default {
data() {
return {
sift_item: ["排序", "筛选"],
list_item: [] as Array<string>,
refresher_enabled_boolean: true,
refresher_triggered_boolean: false,
scroll_top_input: 0
}
},
onLoad() {
let lists : Array<string> = []
for (let i = 0; i < 40; i++) {
lists.push("item---" + i)
}
this.list_item = lists
},
methods: {
list_view_refresherrefresh() {
console.log("下拉刷新被触发 ")
this.refresher_triggered_boolean = true
setTimeout(function(){
this.refresher_triggered_boolean = false
}, 1500)
},
confirm_scroll_top_input(value : number) {
this.scroll_top_input = value
},
clickTH(index:number){
console.log("点击表头：" + index);
}
}
}
</script>
<style>
.page {
flex: 1;
background-color: #f5f5f5;
}
.content-item {
padding: 15px;
margin: 5px 0;
background-color: #fff;
}
.text {
font-size: 14px;
color: #666;
line-height: 20px;
}
.sift-item {
color: #555;
font-size: 16px;
padding: 12px 15px;
}
</style>
# # Compatibility
| Android version | Android uni-app | Android uni-app-x | iOS version | iOS uni-app | iOS uni-app-x | |
|---|---|---|---|---|---|---|
| sticky-header | 5.0 | x | 3.93 | 9.0 | x | - |
| padding | 5.0 | x | 3.98 | 9.0 | x | - |
# # See also
# sticky-section
吸顶布局容器
注意：暂时仅支持作为list-view的子节点, sticky-section不支持css样式！
# # Attributes
| name | type | default | description |
|---|---|---|---|
| push-pinned-header | boolean | true | sticky-section元素重叠时是否继续上推 |
| padding | Array<Number> | [0,0,0,0] | 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |
# sticky-section使用场景
父元素滚动过程中，多个元素有固定到父元素顶部的需求。
父元素中多个元素吸顶需要使用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属性控制子元素位置。其他排版需求要交给子元素实现
# # Example
<template>
<list-view id="list-view" ref="list-view" show-scrollbar=false class="page" rebound="false">
<sticky-section v-for="(sectionText) in data" :padding="sectionPadding" :push-pinned-header="true">
<sticky-header :header-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;">
<!-- <text style="color: #aaa">到底了</text> -->
<button @click="toTop" size="mini">回到顶部</button>
</list-item>
</list-view>
</template>
<script>
export default {
data() {
return {
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
sectionPadding: [0, 10, 0, 10] as Array<number>
}
},
methods: {
toTop(){
uni.getElementById("list-view")!.scrollTop = 0
},
//用于自动化测试
listViewScrollByY(y : number) {
const listview = this.$refs["list-view"] as Element
listview.scrollBy(0, y)
}
}
}
</script>
<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: 5px 0;
background-color: #fff;
}
</style>
# # Compatibility
| Android version | Android uni-app | Android uni-app-x | iOS version | iOS uni-app | iOS uni-app-x | |
|---|---|---|---|---|---|---|
| sticky-section | 5.0 | x | 3.98 | 9.0 | x | - |
| push-pinned-header | 5.0 | x | 3.98 | 9.0 | x | - |
| padding | 5.0 | x | 3.98 | 9.0 | x | - |