sticky-header

吸顶布局容器

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

# # 示例

hello uni-app x

<template>
   <list-view :scroll-y="true" class="page" rebound="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>