How to implement the WeChat applet scroll view container

This article mainly introduces the relevant information on the implementation method of the scroll view container of the WeChat applet. I hope this article can help everyone and let everyone master this part of the content. Friends who need it can refer to it. I hope it can help everyone.

How to implement the scroll view container of the WeChat applet

Directly upload the codes and renderings of the two solutions:

Option 1

This solution is to use the view directly and set the overflow: scroll

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

wxss:

 .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;
}

Rendering:

##Option 2

Use scroll-view + container as the container

wxml:

<scroll-view class="main_container" scroll-y>
  <view class="container">
    <view class="content" wx:for="{{11}}" wx:key="item">
      {{item}}
    </view>
  </view>
</scroll-view>

wxss:

##

.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;
}

Rendering:

Comparison results:

Because scrolling on the iPhone has a spring effect, solution 1 will not be smooth when scrolling. This situation will not occur in Option 2, and the scrolling will be smooth.

Option 2 is a better scroll view solution that I have summarized so far.

Related recommendations:

Slider view container for WeChat applet development

Recommended 10 view container source codes (collection )

WeChat applet: view (view container) component interpretation and analysis

The above is the detailed content of How to implement the WeChat applet scroll view container. For more information, please follow other related articles on the PHP Chinese website!