uniapp에서 요소의 높이를 얻는 방법

uniapp을 사용하여 프로젝트를 개발하는 과정에서 목록 항목의 높이를 동적으로 계산하고 구성 요소의 최소 높이를 설정하는 등 해당 작업 및 레이아웃을 수행하기 위해 요소의 높이를 얻어야 하는 경우가 종종 있습니다. 그렇다면 uniapp에서 요소의 높이를 얻는 방법은 무엇입니까?

방법 1: uni.createComponent()

uniapp에서는 uni.createComponent()를 사용하여 사용자 정의 구성 요소를 동적으로 생성합니다. 커스텀 컴포넌트의 라이프사이클 함수에서 uni.createSelectorQuery() 메소드를 사용하면 요소의 높이, 너비 등 요소 노드의 정보를 얻을 수 있습니다.

예를 들어 div 요소의 높이를 가져옵니다.

사용자 정의 구성 요소의 생성된 수명 주기 함수에서 uni.createSelectorQuery() 메서드를 사용하여 요소 정보를 가져올 수 있습니다.

<template>
  <div class="component">
    <div class="content" ref="content">
      我是一个自定义组件
    </div>
  </div>
</template>

<script>
  export default {
    created () {
      // 获取元素的信息
      uni.createSelectorQuery().in(this).select('.content').boundingClientRect((rect) => {
        console.log('元素高度为：' + rect.height)
      }).exec()
    }
  }
</script>

<style>
  .component {
    width: 100%;
    height: 100%;
  }
  
  .content {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

위 코드에서 ref를 사용해 div 요소에 대한 참조를 가져온 후, 생성된 라이프 사이클 함수에서 uni.createSelectorQuery() 메서드를 사용해 해당 요소의 정보를 쿼리합니다. 그 중 select('.content')는 클래스가 content인 요소를 조회한다는 의미이고,boundingClientRect() 메소드는 해당 요소의 크기 정보를 조회한다는 의미이며, 콜백 함수에서 반환되는 ect는 위치를 포함하는 객체입니다. 요소의 크기 및 기타 정보.

방법 2: uni.pageScrollTo()

경우에 따라 페이지 요소의 높이를 가져와야 하며 이는 uni.pageScrollTo() 메서드를 사용하여 얻을 수 있습니다. 구체적인 코드는 다음과 같습니다.

<template>
  <div class="component">
    <div class="content" ref="content">
      我是一个自定义组件
    </div>
  </div>
</template>

<script>
  export default {
    mounted () {
      // 获取页面中元素的高度
      uni.pageScrollTo({
        selector: '.content',
        success: (res) => {
          console.log('元素高度为：' + res[0].top)
        }
      })
    }
  }
</script>

<style>
  .component {
    width: 100%;
    height: 100%;
  }
  
  .content {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

위 코드에서는 탑재된 라이프사이클 함수를 사용하고, 페이지 렌더링이 완료된 후 uni.pageScrollTo() 메서드를 사용합니다. selector: '.content'는 클래스 콘텐츠가 포함된 요소를 쿼리하는 것을 의미합니다. 성공 콜백 함수의 res는 요소 정보를 얻을 수 있습니다. 여기서 res[0].top은 요소와 페이지 상단 사이의 거리를 의미합니다.

요약:

위의 두 가지 방법 중 전자는 사용자 정의 구성 요소의 요소 높이를 가져오는 데 적합하고 후자는 페이지의 요소 높이를 가져오는 데 적합합니다. 둘 다 고유한 장점과 단점이 있으며 특정 시나리오에 따라 선택할 수 있습니다. 어떤 방법을 사용하든 요소의 높이 및 기타 정보를 얻기 위해서는 해당 수명주기 함수 또는 메서드 내에 크기 정보의 콜백 함수를 추가하는 데 주의가 필요합니다.

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