微信小程序滚动视图容器实现方法详细讲解

wxml:

 <view class="container">

  <view class="content" wx:for="{{11}}" wx:key="item">

    {{item}}

  </view>

</view>

.container {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100vh;

  overflow: scroll;

  padding-bottom: 20rpx;

  background: #FD9494;

}

.content {

  margin: 20rpx auto 0 auto;

  width: 710rpx;

  height: 300rpx;

  background: #ddd;

  border-radius: 16rpx;

  font-size: 80rpx;

  line-height: 300rpx;

  text-align: center;

}

<scroll-view class="main_container" scroll-y>

  <view class="container">

    <view class="content" wx:for="{{11}}" wx:key="item">

      {{item}}

    </view>

  </view>

</scroll-view>

.main_container {

  position: relative;

  width: 750rpx;

  height: 100vh;

  background: #FD9494;

}

 .container {

  position: absolute; /*使用absolute的原因是因为为了防止第一个子视图有margin-top时，造成顶部留白的情况*/

  left: 0;

  top: 0;

  width: 100%;

  padding-bottom: 20rpx;

}

.content {

  margin: 20rpx auto 0 auto;

  width: 710rpx;

  height: 300rpx;

  background: #ddd;

  border-radius: 16rpx;

  font-size: 80rpx;

  line-height: 300rpx;

  text-align: center;

}