```html
<lx-scroller-page ref="scrollerPage" class="demo-block" id="scroller-page-demo1">
  <!-- 头部 -->
  <div
    v-show="showHeader"
    slot="header"
    class="header"
  >
    这里是头部，五秒后将消失
  </div>

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

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


<script>
// ScrollerPage.md
new Vue({
  el: '#scroller-page-demo1',
  
  data: {
    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>
```