WeChat 미니 프로그램에서 폭포 흐름 레이아웃 및 무한 로딩 구현

폭포 흐름 레이아웃은 널리 사용되는 페이지 레이아웃 방법으로, 가장 일반적인 방법은 Pinterest.com입니다. 각 카드의 높이가 다르기 때문에 미관이 고르지 않습니다.

HTML5에서는 이러한 레이아웃 형식을 쉽게 만들 수 있는 jQuery 등을 기반으로 하는 폭포 흐름 레이아웃 플러그인이 많이 있습니다. WeChat 미니 프로그램에서도 이러한 효과를 얻을 수 있지만 미니 프로그램 프레임워크의 일부 특성으로 인해 구현 아이디어에는 여전히 약간의 차이가 있습니다.

오늘은 미니 프로그램에서 이 폭포 흐름 레이아웃을 구현하는 방법을 살펴보겠습니다.

미니 프로그램 폭포 흐름 레이아웃

구현하려는 것은 고정된 2열 레이아웃을 구현한 후 이미지를 동적으로 로드하는 것입니다. 데이터를 이 두 열에 입력합니다(로드된 이미지는 이미지의 실제 크기에 따라 왼쪽 열 또는 오른쪽 열에 배치됩니다).

/* 단일 이미지 컨테이너의 스타일*/.img_item { width: 48%; margin: 1%; display: inline-block; Vertical-align: top;
}

HTML에서 이미지를 동적으로 로드하려면 일반적으로 new Image()를 사용한다는 것을 알고 있습니다. 그림 개체를 만든 다음 이를 사용하여 URL이 가리키는 그림을 동적으로 로드하고 그림의 실제 크기와 기타 정보를 얻습니다. 미니 프로그램 프레임워크에는 이미지 로딩을 처리하기 위해 제공되는 해당 JS 개체가 없습니다. 실제로 wxml의 구성 요소를 사용하여 이러한 기능을 완성할 수 있습니다. 비록 다소 복잡하지만 여전히 기능적 요구 사항을 충족할 수 있습니다.

<-- 페이지에 숨겨진 영역을 배치하고 이미지 구성 요소를 사용하여 하나 이상의 이미지 리소스를 로드합니다.->

페이지에서 데이터 바인딩을 전달하여 요청을 전달할 수 있습니다. 이미지 정보를 wxml에 저장하고 구성 요소가 이미지 리소스를 로드하도록 한 다음, 이미지 로드가 완료되면 바인드로드에서 지정한 이벤트 처리 함수를 통해 추가 처리가 수행됩니다.

페이지 파일에 정의된 onImageLoad 함수를 살펴보겠습니다. 여기서는 로드된 이미지의 실제 크기를 포함하여 들어오는 이벤트 객체 e로부터 구성 요소에 대한 풍부한 정보를 얻을 수 있습니다. 그런 다음 페이지에 표시해야 하는 실제 크기에 따라 이미지의 크기를 조정한 후 크기를 계산합니다. 그런 다음 왼쪽 및 오른쪽 열의 현재 누적된 콘텐츠 높이를 기반으로 현재 로드된 이미지를 어느 면에 배치할지 결정할 수 있습니다.

으르르르르르르르

다음은

아아앙

위 내용은 WeChat 미니 프로그램에서 폭포 흐름 레이아웃 및 무한 로딩 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!