WeChat 애플릿 스크롤 보기 컨테이너를 구현하는 방법-미니 프로그램 개발-php.cn

WeChat 애플릿 스크롤 보기 컨테이너를 구현하는 방법

小云云

풀어 주다： 2018-01-31 13:41:23

원래의

2416명이 탐색했습니다.

이 글은 주로 WeChat 애플릿의 스크롤 뷰 컨테이너 구현 방법에 대한 관련 정보를 소개합니다. 이 글이 모든 사람에게 도움이 되기를 바라며, 필요한 친구들이 이 부분을 참고할 수 있기를 바랍니다. 모두에게 도움이 될 수 있습니다.

WeChat 애플릿의 스크롤 뷰 컨테이너를 구현하는 방법

두 솔루션의 코드와 렌더링을 직접 업로드하세요.

옵션 1

이 솔루션은 뷰를 직접 사용하고 오버플로를 설정하는 것입니다. 스크롤

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

로그인 후 복사

렌더링:

옵션 2

스크롤 뷰 + 컨테이너를 컨테이너로 사용

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: