uniapp에서 콘텐츠의 높이를 얻는 방법

Uniapp은 Vue.js 기반의 크로스 플랫폼 개발 프레임워크로, 동일한 코드를 여러 플랫폼용 애플리케이션으로 컴파일할 수 있습니다. 그중에서도 다양한 플랫폼에서 콘텐츠를 표시하려면 높이를 동적으로 조정해야 할 수도 있습니다.

Uniapp에서는 다음 메소드를 통해 콘텐츠의 높이를 얻을 수 있습니다.

1. uni.createSelectorQuery() 메소드를 사용하세요.

uni.createSelectorQuery() 메소드는 Uniapp의 컴포넌트 정보를 가져오는 API 중 하나입니다. . 너비, 높이, 위치 정보 등 구성 요소의 다양한 정보를 얻을 수 있습니다. 구성요소 정보를 얻은 후 콜백 함수를 사용하여 작업을 수행할 수 있습니다.

예를 들어 뷰 컴포넌트의 높이 정보를 얻어야 한다면 다음과 같이 진행할 수 있습니다.

uni.createSelectorQuery().select('.view-class').boundingClientRect((rect)=>{
    console.log(rect.height);
}).exec()

그 중 '.view-class' 매개변수는 뷰 컴포넌트의 스타일 이름이고, . boundingClientRect() 메소드는 컴포넌트의 위치 및 크기 정보를 얻을 수 있으며, 콜백 함수(Rect)는 컴포넌트 관련 정보를 얻습니다.

2. uni@v3 API 사용

Uniapp v3 버전에서는 새로운 API 추가 등 API가 대폭 업그레이드 및 변경되었습니다.

uni@v3 API를 사용하면 페이지에서 노드 정보를 직접 얻을 수 있고, Wait 구문을 사용하여 비동기 작업을 구현할 수 있습니다.

uni@v3 API에서 높이를 가져오는 방법은 다음과 같이 진행할 수 있습니다.

async function getHeight() {
    const query = uni.createSelectorQuery();
    await new Promise(resolve => {
        query.select('.view-class').boundingClientRect();
        query.exec(res => {
            console.log(res[0].height);
            resolve();
        });
    });
}

query.select('.view-class').boundingClientRect() 문은 구성 요소를 선택하고 높이를 가져오고 Promise를 사용하여 다음을 수행합니다. 비동기화 작업을 계속 실행하기 전에 높이를 얻을 때까지 기다립니다. 쿼리 결과는 res에 저장되고, 높이 정보는 res[0].height를 통해 얻습니다.

요약:

위의 두 가지 방법을 통해 유니앱에서 컴포넌트의 높이 정보를 얻어서 필요에 따라 조정 및 동작시킬 수 있습니다. 실제 개발에서는 유니앱의 API와 관련 지식을 깊이 있게 연구하고 숙달해야 개발에 더 잘 적용할 수 있습니다.

위 내용은 uniapp에서 콘텐츠의 높이를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!