위챗 애플릿의 스크롤 보기 용기 구현 방법
두 가지 스키마 코드와 다이어그램을 직접 업로드합니다.
시나리오 1
이 방안은view를 직접 사용하고overflow:scroll을 설정합니다
wxml:
{{item}}
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:
{{item}}
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 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
