---
nav: default
---
### ScrollerPage
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fscroller-page"/>
<a href="demo/#/component/scroller-page" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/scroller-page</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/scroller-page" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

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

```

#### Github Issue