uniapp js는 요소 크기를 설정합니다.

모바일 애플리케이션의 인기가 높아짐에 따라 프런트엔드 개발자는 다양한 모바일 장치에 대해 다양한 요소 크기를 설정해야 합니다. uniapp js를 사용하여 요소 크기를 설정하는 것은 매우 효과적인 방법입니다. 이 기사에서는 uniapp js를 사용하여 요소 크기를 설정하는 방법을 소개합니다.

1. 구성요소와 스타일을 사용하여 요소 크기 설정

uniapp에서는 구성요소와 스타일을 사용하여 요소 크기를 설정할 수 있습니다. 예를 들어, 아래와 같이 뷰 구성 요소를 사용하여 컨테이너를 만든 다음 너비 및 높이 속성을 사용하여 컨테이너의 크기를 설정할 수 있습니다.

<template>
  <view class="container" style="width: 200px; height: 200px;"></view>
</template>

이 예에서는 뷰 구성 요소를 사용하여 컨테이너를 만듭니다. 스타일 속성을 통해 설정합니다. 컨테이너의 너비와 높이는 각각 200px입니다.

2. js를 사용하여 요소 크기 설정

구성 요소와 스타일을 사용하여 요소 크기를 설정하는 것 외에도 js를 사용하여 요소 크기를 동적으로 설정할 수도 있습니다. uniapp은 아래와 같이 이 기능을 구현하는 몇 가지 메소드를 제공합니다.

1. uni.createSelectorQuery().select()

이 메소드는 너비와 높이를 포함하여 지정된 요소의 정보를 얻는 데 사용됩니다. 요소 및 기타 크기 정보. 이 정보를 사용하여 요소의 크기를 동적으로 계산하고 설정할 수 있습니다.

다음은 uni.createSelectorQuery().select() 메소드를 사용하여 h1 요소의 너비와 높이 정보를 얻고, h2 요소의 너비와 높이를 설정하는 예제입니다. h2 요소의 크기는 h1 요소와 동일합니다.

<template>
  <view class="container">
    <h1 id="title">Hello World</h1>
    <h2 id="subtitle">Subtitle</h2>
  </view>
</template>

<script>
  export default {
    onReady() {
      uni.createSelectorQuery().select('#title').boundingClientRect(rect => {
        uni.createSelectorQuery().select('#subtitle').boundingClientRect(subRect => {
          uni.createSelectorQuery().select('#subtitle').fields({ size: true }, size => {
            this.$nextTick(() => {
              uni.createSelectorQuery().select('#subtitle').boundingClientRect(newRect => {
                const scale = rect.width / newRect.width
                uni.createSelectorQuery().select('#subtitle').boundingClientRect(scaleRect => {
                  uni.createSelectorQuery().select('#subtitle').fields({ size: true }, subSize => {
                    const newHeight = subSize.height * scale
                    uni.createSelectorQuery().select('#subtitle').boundingClientRect(() => {
                      uni.$set(this, 'subtitleStyle',
                        `transform:translate(-50%,-50%)scale(${scale}); width:${subRect.width}px; height:${newHeight}px;`
                      )
                    }).exec()
                  }).exec()
                }).exec()
              }).exec()
            })
          }).exec()
        }).exec()
      }).exec()
    }
  }
</script>

이 예에서는 먼저 h1 요소의 너비와 높이 정보를 얻은 다음 h2 요소의 너비와 높이 정보를 얻은 다음 h2 요소의 크기 조정 비율과 새로운 높이를 계산합니다. 마지막으로 uni.$set 메소드를 사용하여 구성 요소의 subtitleStyle 속성을 업데이트하여 h2 요소에 크기, 너비 및 높이를 적용합니다.

2. uni.$nextTick()

이 메서드는 다음 업데이트 주기 전에 DOM 작업을 수행하는 데 사용됩니다. uniapp의 데이터 바인딩은 비동기식이므로 요소 정보를 얻기 위해 다음 업데이트 주기를 기다려야 하는 경우 이 방법을 사용해야 합니다.

이전 예에서는 uni.$nextTick() 메서드를 사용하여 요소가 업데이트될 때까지 기다렸습니다. 여기에 또 다른 예가 있습니다. vue의 v-if 지시문을 사용하여 요소의 표시 및 숨기기를 제어하는 ​​동시에 uni.$nextTick() 메서드를 사용하여 요소가 업데이트될 때까지 기다립니다.

<template>
  <view>
    <button @click="toggle">Toggle</button>
    <view v-show="show" ref="box" style="width: 200px; height: 200px; background-color: #ccc;"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: true
      }
    },
    methods: {
      toggle() {
        this.show = !this.show
        uni.$nextTick(() => {
          const { width, height } = this.$refs.box.$el.getBoundingClientRect()
          console.log(width, height)
        })
      }
    }
  }
</script>

이 예에서는 vue의 v-show 명령을 사용하여 요소의 표시 및 숨기기를 제어하고 uni.$nextTick() 메서드를 사용하여 요소가 업데이트될 때까지 기다립니다. Toggle 버튼을 클릭하면 show 속성의 값을 제어한 후 uni.$nextTick() 메서드를 사용하여 요소의 너비와 높이 정보를 얻습니다.

간단히 말하면, uniapp에서는 컴포넌트, 스타일, js 메서드를 사용하여 요소 크기를 설정할 수 있습니다. 이 세 가지 방법에는 각각의 장점과 단점이 있으며 실제 필요와 상황에 따라 적절한 방법을 선택할 수 있습니다.

위 내용은 uniapp js는 요소 크기를 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!