위 챗 애플 릿 구성 요소 의 srcoll-view 에 대한 상세 한 설명

위 챗 애플 릿 구성 요소 의 srcoll-view 에 대한 상세 한 설명
오늘 은 scroll-view 학습 에서 만난 문제 와 해결 방법 을 기록 하고 다른 친구 들 에 게 도움 이 되 기 를 바 랍 니 다.
우선 원 하 는 효 과 를 보 여 주세요.↓vertical scroll 은 상하 스크롤 을 실현 하고 horizontal 은 좌우 스크롤 을 실현 합 니 다.

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.전체 화면 은 하나의 view 로 포장 되 어 있 습 니 다.이 view 의 class 는 quickStart 를 만 들 때 자체 적 으로 가지 고 있 으 며 필요 에 따라 스스로 조정 할 수 있 습 니 다.그 다음 에 두 view 는 각각 하나의 scrollview 와 그 위의 text 텍스트 를 포장 합 니 다.
2.첫 번 째 scroll-view 는 수직 으로 스크롤 하여 scroll-y="{true}}"(또는 scroll-y)를 설정 해 야 합 니 다.이 scrollview 의 class 는"scroll-view-y"이 며,이후 코드 를 첨부 합 니 다.scroll-top 속성 은 스크롤 바 의 초기 위 치 를 설정 합 니 다.scrollTop 은 js 파일 의 data 에서 할당 값 을 설명 합 니 다(제거 할 필요 가 없습니다).
3.scrollview 에서 네 개의 색 을 사용 하지 않 는 view 는 색 을 제외 한 다른 속성 이 같 습 니 다.
수직 scrollview 를 위 한 wxss 코드

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

4.수평 방향의 scrollview 는 수직 방향 과 기본적으로 유사 하 므 로 차이 점 을 강조 한다.
(1)세로 방향의 scrollview 는 4 개의 서로 다른 색상 의 view 를 직접 감 싸 고 수평 방향 은 view 로 각 색상 블록 을 감 싸 야 합 니 다.이것 은 각 색상 블록 의 수평 배열 을 확보 하기 위해 서 입 니 다.
(2)wxss 파일    
수평 scrollview 의 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; 
} 

볼 수 있 습 니 다:
① 수평 슬라이더 는 두 가지 속성,display 와 overflow 가 많아 졌 다.display 는 flex 탄성 신축 디 스 플레이 로 설정 되 어 있 으 며,overflow 는 부모 용 기 를 초과 할 때 scroll 디 스 플레이 를 설정 합 니 다.
② 색상 블록 display 속성 을 inline-table 로 설정 하 는 것 이 중요 합 니 다!!처음에 이 속성 을 쓰 지 않 았 기 때문에 오랫동안 scrollview 의 수평 미끄럼 을 실현 할 수 없습니다.나의 끊 임 없 는 시도 끝 에 마침내 해 냈 다.매우 기쁘다!혀 를 내밀다
위 챗 공식 속성 설명↓첨부
속성 명
유형
기본 값
설명 하 다.
scroll-x
Boolean
false
가로 스크롤 허용
scroll-y
Boolean
false
세로 스크롤 허용
upper-threshold
Number
50
상단/왼쪽 에서 얼마나 멀 었 을 때(단위 px)scrolltoupper 이벤트 가 발생 합 니 다.
lower-threshold
Number
50
아래쪽/오른쪽 에서 얼마나 떨 어 졌 을 때(단위 px)scrolltolower 이벤트 가 발생 합 니 다.
scroll-top
Number
 
세로 스크롤 바 위치 설정
scroll-left
Number
 
가로 스크롤 바 위치 설정
scroll-into-view
String
 
값 은 하위 요소 id(id 는 숫자 로 시작 할 수 없습니다)입 니 다.굴 러 갈 방향 을 설정 하면 이 요소 로 굴 러 갈 방향 을 설정 합 니 다.
scroll-with-animation
Boolean
false
스크롤 바 위 치 를 설정 할 때 애니메이션 과도 사용 하기
enable-back-to-top
Boolean
false
iOS 가 상단 상태 표시 줄,안 드 로 이 드 를 클릭 하여 제목 표시 줄 을 두 번 눌 렀 을 때 스크롤 바 는 상단 으로 돌아 가 세로 방향 만 지원 합 니 다.
bindscrolltoupper
EventHandle
 
상단/왼쪽으로 스크롤 하면 scrolltoupper 이벤트 가 발생 합 니 다.
bindscrolltolower
EventHandle
 
끝까지/오른쪽으로 스크롤 하면 scrolltolower 이벤트 가 발생 합 니 다.
bindscroll
EventHandle
 
스크롤 시 실행,event.detail={scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltay}
궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 교류 하 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!