微信小程序 - scroll-view 的一些要点（scroll-view 需要设置滚动方向、scroll-view 需要设置高度）

scroll-view 需要设置滚动方向

html 复制代码

<view class="page-container">
    <view class="other-data">other content</view>
    <scroll-view class="data-list">
        <view class="data-item">some content</view>
        <view class="data-item">some content</view>
        <view class="data-item">some content</view>
        <view class="data-item">some content</view>
        <view class="data-item">some content</view>
    </scroll-view>
</view>

css 复制代码

Page {
  width: 100%;
  height: 100%;

  .page-container {
    width: 100%;
    height: 100%;

    .other-data {
      height: 200rpx;
      background-color: aquamarine;
    }

    .data-list {
      box-sizing: border-box;
      width: 100%;
      height: calc(100% - 200rpx);
      padding: 40rpx;

      .data-item {
        box-sizing: border-box;
        width: 100%;
        height: 500rpx;
        border: 1rpx solid #bbbbbb;
        margin-top: 40rpx;

        &:first-child {
          margin-top: 0rpx;
        }
      }
    }
  }
}

在上述代码中，scroll-view 无法滚动，因为 scroll-view 默认不滚动，需要明确设置 scroll-x 或 scroll-y 属性

html 复制代码

<scroll-view class="data-list" scroll-y>
    
    ...

</scroll-view>

scroll-view 需要设置高度

html 复制代码

<view class="page-container">
    <view class="other-data">other content</view>
    <scroll-view class="data-list" scroll-y>
        <view class="data-item">some content</view>
        <view class="data-item">some content</view>
        <view class="data-item">some content</view>
        <view class="data-item">some content</view>
        <view class="data-item">some content</view>
    </scroll-view>
</view>

css 复制代码

Page {
  width: 100%;
  height: 100%;

  .page-container {
    width: 100%;
    height: 100%;

    .other-data {
      height: 200rpx;
      background-color: aquamarine;
    }

    .data-list {
      box-sizing: border-box;
      width: 100%;
      padding: 40rpx;

      .data-item {
        box-sizing: border-box;
        width: 100%;
        height: 500rpx;
        border: 1rpx solid #bbbbbb;
        margin-top: 40rpx;

        &:first-child {
          margin-top: 0rpx;
        }
      }
    }
  }
}

在上述代码中，scroll-view 无法滚动，实际滚动的是 view:page-container（因为 view:other-data 被连带滚动），scroll-view 未设置高度，无法计算可滚动区域，导致无法滚动

css 复制代码

.data-list {
    height: calc(100% - 200rpx);

    ...
}