uniapp-轮播图swiper根据内容图片高度自适应，解决获取图片高度不准确的问题

痛定思痛。 2024-03-17 22:10 82阅读 0赞

需求：轮播图swiper根据内容图片高度自适应

但是通过uniapp`uni.createSelectorQuery`的方法获取图片高度不正确，比如图片是100，获取是200，`this.$nextTick`也不能解决，`setTimeout`到是能解决，但是不稳定，有时200ms能正确，有时不能，再设置久一点，用户体验不好，图片等待时间太久了

研究了一下，图片加载完成时间@load里，也能`e.detail.height`获取图片高度，但返回的图片高度还是不正确，太坑了，但load里再使用`uni.createSelectorQuery`的方法获取图片高度则正确了

<template>
      <swiper class="swiper" @change="viewChange" :autoplay="true" circular :indicator-dots="false" v-if="imgsList.length" :style="[{ height: swiperHeight + 'px' }]">
        <swiper-item v-for="item in imgsList" :key="item.id">
          <view class="swiper-item uni-bg-red" @click="clickBreak(item)">
            <image :src="item.clientFileUrl" mode="widthFix" class="img" @load="loadImg"></image>
          </view>
        </swiper-item>
      </swiper>
    </template>
    
    <script>
    export default {
          
      name: 'swiperImg',
      props: {
          
        imgsList: Array,
      },
      data() {
          
        return {
          
          swiperHeight: 0,
          current: 0,
        };
      },
      methods: {
          
        loadImg() {
          
          this.getCurrentSwiperHeight('.img');
        },
        // 轮播切换
        viewChange(e) {
          
          this.current = e.target.current;
          this.getCurrentSwiperHeight('.img');
        },
        // 动态获取内容高度
        getCurrentSwiperHeight(element) {
          
          let query = uni.createSelectorQuery().in(this);
          query.selectAll(element).boundingClientRect();
          query.exec((res) => {
          
            // 切换到其他页面swiper的change事件仍会触发，这时获取的高度会是0，会导致回到使用swiper组件的页面不显示了
            if (this.imgsList.length && res[0][this.current].height) {
          
              this.swiperHeight = res[0][this.current].height;
            }
          });
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    .swiper {
          
      padding: 0 20rpx;
      margin-top: 5px;
      margin-bottom: 1px;
      border-radius: 4px 4px 4px 4px;
      .swiper-item {
          
        width: 100%;
        image {
          
          width: 100%;
        }
      }
    }
    </style>