<template>
  <scroller-page ref="scrollerPage">
    <!-- 头部 -->
    <div
      v-show="showHeader"
      slot="header"
      class="header"
    >
      这里是头部，五秒后将消失
    </div>

    <!-- 滚动区域 -->
    <scroller
      lock-x
      scrollbar-y
      height="100%"
    >
      <ul class="box1">
        <li
          v-for="item in 40"
          :key="item"
        >
          {{ item + ' - 滚动区域' }}
        </li>
      </ul>
    </scroller>

    <!-- 底部 -->
    <div
      slot="footer"
      class="footer"
    >
      这里是底部
    </div>
  </scroller-page>
</template>

<script>
import { Scroller, ScrollerPage } from '../components/_index'
export default {
  components: {
    Scroller,
    ScrollerPage
  },
  data () {
    return {
      showHeader: true
    }
  },
  mounted () {
    // 模拟动态隐藏头部，调用 scroller-page 组件的 computedHeight 方法重新计算 scroller 组件高度
    setTimeout(() => {
      this.showHeader = false
      this.$nextTick(() => {
        this.$refs.scrollerPage.computeHeight()
      })
    }, 5000)
  }
}
</script>

<style>
  .header, .footer {
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    background-color: #f00;
    color: #fff;
  }
</style>
