/No-Code Development Agency

Bubble.io에서 연속 스크롤 기능을 어떻게 만드는지?

Bubble.io 앱에서 무한한 콘텐츠의 힘을 해제하세요. 저희의 쉬운 단계별 가이드를 통해 매끄러운 연속 스크롤 기능을 생성하세요. 지금 시작하세요!

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.

Book a free No-Code consultation

Bubble.io에서 연속 스크롤 기능을 어떻게 만드는지?

Bubble.io에서 연속 스크롤 기능을 만드는 것은 '세로 스크롤' 레이아웃을 사용하는 반복 그룹 요소를 사용하는 것을 포함합니다. 여기에 어떻게 설정할 수 있는지가 있습니다:

1단계: Bubble.io 편집기를 열고 연속 스크롤 기능을 구현하고자 하는 디자인 페이지로 이동합니다.

2단계: 편집기에서 "+" 아이콘을 클릭하여 애플리케이션에 추가할 수 있는 시각적 요소에 액세스합니다.

3단계: 요소 목록에서 '반복 그룹'을 찾고 선택하십시오. 이 요소를 디자인 캔버스로 클릭하고 끌어다 놓습니다.

4단계: 내용을 표시하려는 영역에 맞게 반복 그룹의 크기를 조정해야 합니다. 이것은 데이터를 나타내는 개별 셀을 포함할 수 있을만큼 충분히 큰지 확인하십시오.

5단계: 반복 그룹이 선택되면 화면 오른쪽의 속성 편집기를 살펴보십시오.

6단계: '컨텐츠 유형' 필드를 반복 그룹에 표시하고 싶은 데이터 유형으로 설정하십시오. 여기서는 사용자, 제품, 메시지 등이 있을 수 있습니다. 이것은 주로 Bubble.io 앱의 데이터베이스에 정의한 데이터 유형에 따라 달라집니다.

7단계: '데이터 소스'를 반복 그룹에 할당하십시오. 일반적으로 이것은 표시하려는 항목 목록을 검색하는 검색 쿼리입니다. 예를 들어 "사용자 검색하기" 또는 앱에 관련된 다른 검색이 될 수 있습니다.

8단계: 이제 레이아웃 스타일을 선택해야 합니다. '레이아웃 스타일' 드롭다운 메뉴에서 '세로 스크롤'을 선택합니다. 이 특정 레이아웃은 사용자가 스크롤 할 때만 반복 그룹에 셀을 추가하고 데이터를 로드하게 하여, 보이는 항목만 로드하기 때문에 성능 효율이 더 좋습니다.

9단계: 첫 번째 셀에 텍스트, 이미지 돌은 버튼과 같은 요소를 추가하여 반복 그룹을 사용자화하십시오. 이 디자인 요소는 목록의 각 데이터 항목에 대해 반복됩니다.

10단계: '미리보기' 버튼을 클릭하여 연속 스크롤 기능이 실제로 작동하는 방법을 미리 볼 수 있습니다. 반복 그룹은 스크롤을 내릴 때 동적으로 새로운 셀을 추가할 것입니다.

11단계: 목록의 끝에 도달했을 때 더 많은 데이터를로드하거나 새 데이터가 로드되었을 때 트리거를 구현하는 등 고급 상호 작용이 필요한 경우, 스크롤링, 끝에 도달하거나 반복 그룹을 업데이트하는 등 관련 이벤트에 연결된 워크플로우를 만들 수 있습니다.

연속 스크롤 기능은 데이터 소스의 설정 방법 및 Bubble 앱에서의 검색 성능에 크게 의존하므로 검색이 적절히 인덱싱되고 최적화되었는지 확인하여 앱이 확장됨에 따라 가능한 성능 문제를 방지해야 합니다.

더 유용한 노코드 리소스 살펴보기

No-Code Tools Reviews

Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.

Explore

WeWeb Tutorials

Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.

Explore

No-Code Tools Comparison

Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.

Explore

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Cookie preferences