sticky-header.uvue

<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>