About the implementation method of WeChat applet scroll view container

不言
Release: 2018-06-26 16:13:08
Original
2927 people have browsed it

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 in need can refer to it

The implementation method of the scroll view container of the WeChat applet

Directly upload the codes and renderings of the two solutions:

Option 1

This solution is Use view directly and set overflow: scroll

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

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;
}
Copy after login

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>
Copy after login

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;
}
Copy after login

Rendering:

Comparison results:


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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the production of the welcome page in the WeChat mini program

The scrolling message notification in the WeChat mini program accomplish

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!