uniapp에서 스와이퍼 높이를 동적으로 설정하는 방법

Swiper는 많은 유니앱 개발 프로젝트에서 자주 사용되는 컴포넌트로, 이미지 캐러셀, 광고 표시 등의 기능을 쉽게 구현할 수 있는 슬라이딩 뷰 컨테이너를 제공합니다. 그러나 실제 프로젝트에서는 콘텐츠 변경에 적응하기 위해 콘텐츠 높이에 따라 Swiper의 높이를 동적으로 설정해야 하는 경우가 많습니다. 그렇다면 uniapp에서 Swiper의 높이를 동적으로 설정하는 방법은 무엇입니까?

1. Swiper 높이 계산

실제 프로젝트에서는 Swiper에 필요한 높이를 얻기 위해 다른 뷰 컨테이너(예: div)를 통해 Swiper 구성 요소를 포함할 수 있습니다. Swiper에 포함된 모든 콘텐츠를 컨테이너에 추가하고 높이를 계산하면 Swiper의 높이가 콘텐츠 변경에 맞게 동적으로 설정될 수 있습니다.

샘플 코드:

<template>
  <view>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">内容1</div>
        <div class="swiper-slide">内容2</div>
        <div class="swiper-slide">内容3</div>
      </div>
    </div>
  </view>
</template>
<script>
  export default {
    onReady() {
      this.calcHeight()
    },
    methods: {
      //计算高度
      calcHeight() {
        let _this = this
        setTimeout(() => {
          uni.createSelectorQuery()
            .in(this)
            .select('.swiper-container')
            .boundingClientRect((rect) => {
              _this.swiperHeight = rect.height
            })
            .exec()
        }, 200)
      }
    },
    data() {
      return {
        swiperHeight: 0
      }
    }
  }
</script>

<style>
  .swiper-container {
    height: {{swiperHeight}}px;
  }
</style>

위 코드에서는 먼저 템플릿에 Swiper 구성 요소를 생성하고 이 구성 요소를 div 컨테이너에 래핑한 다음 Swiper의 컨테이너 클래스에 swiper-container 스타일을 추가했습니다. 스위퍼. 다음으로 Swiper 구성 요소가 로드된 후 uni.createSelectorQuery() 함수를 사용하여 컨테이너의 높이를 가져와 구성 요소의 데이터(예: swiperHeight 변수)에 저장합니다. 마지막으로 스타일 시트의 변수를 통해 Swiper의 높이를 설정하여 동적으로 높이를 설정하는 효과를 얻습니다.

2. 사용자 정의 지침 사용

위 방법 외에도 uniapp에서 제공하는 사용자 정의 지침을 통해 Swiper의 높이를 동적으로 설정할 수도 있습니다. 먼저 구성 요소에서 v-swiper-height 지시문을 사용하고 높이를 계산해야 하는 컨테이너 클래스 이름을 지정합니다. 그런 다음 Swiper에 필요한 높이를 계산하는 업데이트 함수를 지시문에 정의하고 el.style.height를 사용하여 Swiper의 높이를 설정함으로써 높이를 동적으로 설정하는 효과를 얻습니다.

샘플 코드:

<template>
  <swiper class="my-swiper" v-swiper-height=".my-swiper">
    <swiper-item>内容1</swiper-item>
    <swiper-item>内容2</swiper-item>
    <swiper-item>内容3</swiper-item>
  </swiper>
</template>
<script>
  export default {
    directives: {
      //自定义指令
      swiperHeight: {
        update(el, binding) {
          uni.createSelectorQuery()
            .in(this)
            .select(binding.value)
            .boundingClientRect((rect) => {
              el.style.height = rect.height + 'px'
            })
            .exec()
        }
      }
    }
  }
</script>
<style>
  .my-swiper {
    height: auto;
  }
</style>

위 코드에서는 먼저 템플릿에 Swiper 구성 요소를 생성하고 이 구성 요소를 사용자 정의 컨테이너 클래스(my-swiper)에 래핑합니다. 그런 다음 v-swiper-height 지시문을 사용하고 높이를 계산해야 하는 컨테이너 클래스 이름 매개변수를 설정합니다. 다음으로 지시문에서 swiper-height에 바인딩된 값이 변경되면 업데이트 함수가 트리거됩니다. 이 함수에서는 uni.createSelectorQuery() 함수를 통해 지정된 컨테이너의 높이를 가져와서 Swiper의 높이로 설정합니다.

요약하자면, 위의 두 가지 방법은 Swiper의 높이를 동적으로 설정할 수 있으며 실제 프로젝트의 필요에 따라 이를 구현하는 데 더 적합한 방법을 선택할 수 있습니다.

위 내용은 uniapp에서 스와이퍼 높이를 동적으로 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!