Uniapp swiper 高度自适应 vue3

344 阅读1分钟
<template>
    <swiper class="swiper-box" @change="handleChange" :autoplay="false" :current="currentIndex"
          :style="{ height: swiperHeight }">
          <swiper-item>
            <view class="swiper-item">
             xxxxx
            </view>
          </swiper-item>
    </swiper>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, getCurrentInstance, onMounted } from "vue";
const instance = getCurrentInstance();
const currentIndex = ref<number>(0);
function getBoundingClientRect(selector: any, callback: any) {  let query = uni.createSelectorQuery().in(instance);  query    .selectAll(selector)    .boundingClientRect(data => {      callback(data);    })    .exec();}const handleChange = (e: any) => {  console.log(e);  if (e.detail) {    currentIndex.value = e.detail.current;  } else {    currentIndex.value = e;  }  const element = `.swiper-item`;  console.log(element);  nextTick(() => {    getBoundingClientRect(element, (data: any) => {      console.log('高度', data);      swiperHeight.value = data[currentIndex.value].height + 20 + 'px';    });  })}
</script>

希望对你有帮助!多交流