icon: ''
tags:
  en:
    - layout
    - scroll-page
  zh-CN:
    - 布局
    - 滚动页面
slots:
  default:
    en: title
    zh-CN: 滚动区域内容
  header:
    en: header
    zh-CN: 头部内容
  footer:
    en: footer
    zh-CN: 底部内容
methods:
  computeHeight:
    en: 'Header and footer based height, dynamic calculation of scroller area height'
    zh-CN: '基于 header 和 footer 的高度，动态计算 scroller 区域高度'
after_extra: |
  <p class="tip">
  如需动态控制 header 或 footer 显示状态，需要在 dom 更新完毕之后，调用组件的 computeHeight 方法重新计算 scroller 区域高度。
  </p>

  ``` js
  this.$nextTick(() => {
    this.$refs.scrollerPage.computeHeight()
  })
  ```