이 글은 WeChat 애플릿 튜토리얼에서 wxapp view 컨테이너 스크롤뷰 관련 정보를 주로 소개하고 있습니다. 도움이 필요한 친구들은 참고하시면 됩니다.
관련 글:
WeChat 미니 프로그램 튜토리얼 wxapp 뷰 컨테이너 스와이프
WeChat 미니 프로그램 튜토리얼 wxapp 뷰 컨테이너 스크롤 뷰
-
WeChat 애플릿 튜토리얼 wxapp 보기 컨테이너 보기
스크롤 보기
스크롤 가능한 보기 영역.
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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,则滚动到该元素,元素顶部对齐滚动区域顶部 | |
bindscrolltoupper | EventHandle | 滚动到顶部/左边,会触发 scrolltoupper 事件 | |
bindscrolltolower | EventHandle | 滚动到底部/右边,会触发 scrolltolower 事件 | |
bindscroll | EventHandle | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
세로 스크롤을 사용할 때는
샘플 코드:
<view class="section"> <view class="section__title">vertical scroll</view> <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> <view id="blue" class="scroll-view-item bc_blue"></view> </scroll-view> <view class="btn-area"> <button size="mini" bindtap="tap">click me to scroll into view </button> <button size="mini" bindtap="tapMove">click me to scroll</button> </view> </view> <view class="section section_gap"> <view class="section__title">horizontal scroll</view> <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"> <view id="green" class="scroll-view-item_H bc_green"></view> <view id="red" class="scroll-view-item_H bc_red"></view> <view id="yellow" class="scroll-view-item_H bc_yellow"></view> <view id="blue" class="scroll-view-item_H bc_blue"></view> </scroll-view> </view>
var order = ['red', 'yellow', 'blue', 'green', 'red'] Page({ data: { toView: 'red', scrollTop: 100 }, upper: function(e) { console.log(e) }, lower: function(e) { console.log(e) }, scroll: function(e) { console.log(e) }, tap: function(e) { for (var i = 0; i < order.length; ++i) { if (order[i] === this.data.toView) { this.setData({ toView: order[i + 1] }) break } } }, tapMove: function(e) { this.setData({ scrollTop: this.data.scrollTop + 10 }) } }) scroll-view
읽어주셔서 감사합니다. 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!
WeChat 애플릿 튜토리얼 wxapp 뷰 컨테이너 스크롤 뷰 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전

Dreamweaver Mac版
시각적 웹 개발 도구
