Home > Article > WeChat Applet > 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<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; }
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:
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!