<template>
  <view style="flex: 1;">
    <view class="content-item">
      <text class="text">左右滑动页面，体验swiper嵌套list-view效果。</text>
    </view>
    <swiper style="flex: 1;" :current="currentVal" @change="swiperChange">
      <swiper-item v-for="index in 3">
        <list-view :id="'list'+index" style="flex: 1;" refresher-enabled="true" @refresherrefresh="onRefresherrefresh"
          :refresher-triggered="refresherTriggeredArray[index-1]" :scroll-top="scrollTop">
          <sticky-header>
            <text class="header">上下滑动体验吸顶效果 swiper-item{{index}}</text>
          </sticky-header>
          <list-item v-for="itemIndex in 40" class="item">
            <text>item----------{{itemIndex}}</text>
          </list-item>
        </list-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        swiperCurrentIndex: 0,
        currentVal: 0,
        scrollTop: 0,
        refresherTriggeredArray: [false, false, false] as Array<boolean>,
      }
    },
    methods: {
      swiperChange(e : SwiperChangeEvent) {
        this.swiperCurrentIndex = e.detail.current
      },
      onRefresherrefresh() {
        this.refresherTriggeredArray[this.swiperCurrentIndex] = true;
        setTimeout(() => {
          this.refresherTriggeredArray[this.swiperCurrentIndex] = false;
        }, 100)
      }
    }
  }
</script>

<style>
  .item {
    padding: 15px;
    margin: 0 0 5px 0;
    background-color: #fff;
    border-radius: 5px;
  }

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

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

  .header {
    background-color: #ffaa00;
    padding: 15px;
    text-align: center;
    color: #fff;
  }
</style>