위 챗 애플 릿 스크롤 보기 용기 구현 방법

위 챗 애플 릿 스크롤 보기 용기 구현 방법
두 가지 방안 코드 와 효과 도 를 직접 올 립 니 다.
프로젝트 1
이 방안 은 view 를 직접 사용 하고 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;
}

효과 그림:

방안 2
scroll-view+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;
}

효과 그림:

비교 결과:
아이 폰 에서 굴 리 면 스프링 효과 가 있 기 때문에 프로젝트 1 은 굴 릴 때 원활 하지 않 은 현상 이 나타난다.방안 2 는 이런 상황 이 발생 하지 않 을 뿐만 아니 라 스크롤 도 원활 하 다.
방안 2 는 내 가 현재 정리 한 비교적 좋 은 스크롤 보기 방안 이다.
궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 교류 하 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

OpenSSL 생 성 ssl 인증서

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

위 챗 애플 릿 스크롤 보기 용기 구현 방법

좋은 웹페이지 즐겨찾기