ni 文檔中 scroll-view 說明

可滾動視圖區域，用于區域滾動。使用豎向滾動時，需要給 scroll-view 一個固定高度，通過 css 設置 height；使用橫向滾動時，需要給 scroll-view 添加 white-space: nowrap; 樣式。

微信小程序文檔中 scroll-view 說明

可滾動視圖區域。使用豎向滾動時，需要給scroll-view一個固定高度，通過 WXSS 設置 height。組件屬性的長度單位默認為px，2.4.0起支持傳入單位(rpx/px)。

場景一：布局中已知高度局部滾動

一般頁面布局中某個模塊需要局部滾動，以橫向滾動更多，縱向滾動其實也類似。這個也是 scroll-view 最簡單的用法，縱向滾動直接設置一個已知的固定高度 height 就行了，沒啥難度。

場景二：整個布局上、中、下3個模塊布局，中間局部滾動

常見整個頁面布局，需要中間部分直接自適應屏幕然后局部滾動。這個實現稍微難一點：

• js 實現：直接獲取到屏幕的整個高度，然后減去上下模塊的高度就是中間的 scroll-view 高度了。

// 獲取屏幕可用高度
let screenHeight=uni.getSystemInfoSync().windowHeight

• css 實現：外層盒子直接 flex 布局，主軸改為 column 縱向，然后中間部分在 scroll-view 標簽外面再套一個div，這個div 的 flex 設為 1 自動設置高度，然后 scroll-view 的 height 設為 100%。不過注意最外層的盒子一定要是已知高度的，像整個頁面這種其實也是已知高度，否則無效。

<template>
  <div class="page">
    <div class="top" />
    <div class="center">
      <scroll-view style="height: 100%;"></scroll-view>
    </div>
    <div class="bottom" />
  </div>
<template>
<style>
.page {
  display: flex;
  flex-direction: column;
}

.top {
  height: 100px;
  background: green;
}

.bottom {
  height: 100px;
  background: red;
}

.center {
  flex: 1;
}
</style>

場景三：未知高度局部滾動

這個就有點難度了，其實就是我們 pc 上常用的設置最大高度 max-height，如果超過了最大高度則出現滾動條，很不幸在小程序這種方式滾動不了。

一般用在彈窗中比較多，設置一個固定高度確實可以實現，但是內容較少時會出現大量留白，用純 css 我是沒找到實現方式，因為需要動態獲取到內容的高度才知道要給 scroll-view 設置多高。

<template>
  <div class="pop">
    <div class="header">我是標題</div>
    <scroll-view :style="'height:' + height + 'px'">
      <div id="scroll-content"></div>
    </scroll-view>
    <div class="footer">確定</div>
  </div>
<template>
<script>
export default {
  data() {
    return {
      height: 200 // 默認滾動高度
    }
  },
  mounted() {
    // 實際彈窗中應該是在彈窗顯示時去計算高度，此處僅作示例，獲取不到節點信息可以放到 $nextTick 中去獲取
    this.calcHeight()
  },
  methods: {
    calcHeight() {
      const query=uni.createSelectorQuery().in(this)
      query.select('#scroll-content').boundingClientRect(res=> {
        const h=res ? res.height : 0
        let height=this.height
        if (h > 0 && h <=this.height) {
          // 感覺獲取到的 res.height 和實際的有大約 39px 誤差，所以自己減去一點
          height=(h > 19) ? (h - 19) : h
        }

        this.height=height
      }).exec()
    }
  }
}
</script>

注意 createSelectorQuery 在自定義組件中要加上 in(this)