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 공식 속성 설명 ↓

속성 이름	Type	기본값	Description
scroll-x	Boolean	false	수평 허용 스크롤
scroll-y	Boolean	false	수직 스크롤 허용
upper-threshold	Number	50	위/왼쪽에서 얼마나 멀리(px) 스크롤탑퍼 event
lower-threshold	Number	50	scrolltolower 이벤트가 하단/오른쪽(단위 px)에서 얼마나 멀리 떨어져 있는지
scroll-top	Number		세로 스크롤 설정 bar position
scroll-left	Number		가로 스크롤 막대 위치 설정
scroll-into-view	String		값은 특정 하위 요소 ID( ID는 숫자로 시작할 수 없습니다.) 스크롤 가능한 방향을 설정한 다음 해당 방향의 요소로 스크롤하세요
scroll-with-animation	Boolean	false	스크롤 막대 위치를 설정할 때 애니메이션 전환을 사용하세요
enable-back-to- top	Boolean	false	iOS가 상단 상태 표시줄을 클릭하고 Android가 제목 표시줄을 두 번 클릭하면 스크롤 막대는 수직
bindscrolltoupper	EventHandle		Scroll만 지원합니다. 위쪽/왼쪽으로 스크롤하면 scrolltoupper 이벤트
bindscrolltolower	EventHandle		가 아래쪽/오른쪽으로 스크롤되고, scrolltolower 이벤트
bindscroll	EventHandle	이 트리거됩니다.	는 다음과 같은 경우에 트리거됩니다. scrolling Trigger, event.detail = {scrollLeft, scrollTop, scrollHeight , scroll Width, delta 스크롤바를 숨기는 스크롤뷰 방법 소개

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