WeChat 애플릿의 스크롤 보기 구성 요소에 대한 자세한 설명

이 글은 위챗 애플릿 구성 요소의 스크롤 보기에 대한 자세한 설명에 대한 관련 정보를 주로 소개합니다. 이 부분을 이해하고 숙달하는 데 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 모든 사람.

WeChat 애플릿 구성 요소인 srcoll-view에 대한 자세한 설명

오늘은 다른 학생들에게 도움이 되길 바라면서 스크롤 뷰 학습에서 겪게 되는 문제와 해결 방법을 기록해 보겠습니다.

먼저 달성하고 싶은 효과를 보여주세요. ↓ 수직 스크롤은 상하 스크롤을 구현하고, 수평 스크롤은 좌우 스크롤을 구현합니다.

wxml 코드를 먼저 첨부하세요.

<view class="container"> 
 <view> 
  <text>vertical scroll</text> 
  <scroll-view scroll-y class="scroll-view-y" scroll-top="{{scrollTop}}"> 
   <view id="green" class="scroll-y-item bg_green"></view> 
   <view id="red" class="scroll-y-item bg_red"></view> 
   <view id="blue" class="scroll-y-item bg_blue"></view> 
   <view id="yellow" class="scroll-y-item bg_yellow"></view> 
  </scroll-view> 
 </view> 
 
 <view> 
  <text>horizontal scroll</text> 
  <scroll-view scroll-x class="scroll-view-x" style="width:100%"> 
   <view class="scroll-view-x"> 
    <view class="scroll-x-item bg_green"></view> 
    <view class="scroll-x-item bg_red"></view> 
    <view class="scroll-x-item bg_blue"></view> 
    <view class="scroll-x-item bg_yellow"></view> 
   </view> 
  </scroll-view> 
 </view> 
</view>

1. 전체 인터페이스는 QuickStart 생성 시 포함되며 필요에 따라 조정될 수 있습니다. 그 후 두 뷰는 각각 스크롤 뷰와 그 위의 텍스트를 래핑합니다.

2. 첫 번째 스크롤 뷰는 수직으로 스크롤해야 하며, scroll-y="{{true}}"를 설정해야 합니다(또는 직접 스크롤 y를 작성해야 합니다). 이 스크롤뷰의 클래스는 "scroll-view-y"이며 코드는 추후 첨부하겠습니다. scroll-top 속성은 스크롤 막대의 초기 위치를 설정하며, scrollTop은 js 파일의 데이터에 선언됩니다(필요하지 않은 경우 제거할 수 있음).

3. 색상을 사용하지 않는 스크롤뷰의 4개 뷰는 색상을 제외하고 동일한 속성을 갖습니다.

는 수직 스크롤뷰

.scroll-view-y { 
 height: 200px; 
 width: 100%; 
} 
 
.scroll-y-item { 
 height: 70px; 
 width: 100%; 
}

4의 wxss 코드입니다. 수평 스크롤뷰는 기본적으로 수직 스크롤뷰와 유사하지만 차이점에 집중해 보겠습니다.

(1) 수직 방향의 스크롤뷰는 서로 다른 색상의 4개 뷰를 직접 래핑해야 합니다. 이는 색상 블록이 수평으로 정렬되도록 하기 위한 것입니다.

(2) wxss 파일

은 가로 스크롤뷰의 wxss 코드이고, scroll-view-x는 가로 슬라이더의 속성이고, scroll-x-item은 가로 슬라이더의 각 색상 블록의 속성입니다.

.scroll-view-x { 
 width: 300px; 
 height: 100px; 
 display: flex; 
 overflow: scroll; 
} 
 
.scroll-x-item { 
 width: 95px; 
 height: 100%; 
 display: inline-table; 
}

볼 수 있는 내용:

①수평 슬라이더에는 표시 및 오버플로라는 두 가지 속성이 더 있습니다. 디스플레이는 가변으로 설정되고 오버플로는 하위 레이아웃이 상위 컨테이너를 초과할 때 스크롤되도록 설정됩니다.

②컬러 블록의 표시 속성이 인라인 테이블로 설정되어 있는데 이것이 매우 중요합니다! ! ! 처음에는 이 속성을 쓰지 않았고, 스크롤뷰의 수평 슬라이딩을 오랫동안 깨닫지 못했습니다. 끊임없는 시도 끝에 드디어 사용해 보았는데 매우 만족스럽습니다! 혀 내밀어

첨부된 내용은 WeChat 공식 속성 설명 ↓

위 내용은 WeChat 애플릿의 스크롤 보기 구성 요소에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!