EveryLike/pages/component/sticky-header/sticky-header.uvue

<template>
  <list-view :scroll-y="true" class="page" bounces="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" style="height: 240px;">
        <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-section>
      <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>
    </sticky-section>
  </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() {
      this.loadListData()
    },
    methods: {
      list_view_refresherrefresh() {
        console.log("下拉刷新被触发 ")
        this.refresher_triggered_boolean = true
        setTimeout(() => {
          this.refresher_triggered_boolean = false
        }, 1500)
      },
      confirm_scroll_top_input(value : number) {
        this.scroll_top_input = value
      },
      clickTH(index : number) {
        console.log("点击表头：" + index);
      },
      loadListData() {
        let lists : Array<string> = []
        for (let i = 0; i < 40; i++) {
          lists.push("item---" + i)
        }
        this.list_item = lists
      },
      //自动化测试使用
      clearListData() {
        this.list_item = []
      }
    }
  }
</script>

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