tuniao-ui/vipPage/life/active/active.vue

<template>
  <view class="template-swiper">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
    
    <swiper class="card-swiper time" :current="cardCur" :circular="true" :vertical="false" :autoplay="false" duration="500" interval="5000" @change="cardSwiper" :style="{height: currentImageHeight + 'rpx'}">
      <swiper-item v-for="(item,index) in swiperList" :key="index">
        <image :src="item.url" @load="onImageLoad(index, $event)" mode="widthFix"></image>
      </swiper-item>
    </swiper>
    
    <!-- 为了做内容过渡动画，图鸟加了骚操作在这里 -->
    <view class="time" style="position: absolute;top:0;width: 100%;" :style="{marginTop: currentImageHeight + 20 + 'rpx'}">
      <view class="indication">
          <block v-for="(item,index) in swiperList" :key="index">
              <view class="spot" :class="cardCur==index?'active':''"></view>
          </block>
      </view>
      <view class="tn-padding tn-margin-top">
        图鸟swiper自适应高度+完美终稿 </br>
        高÷宽x750=换算后的高度（即宽限制为750，高为）: </br>
        {{ currentImageHeight }}
      </view>
    </view>
    
  </view>
</template>


<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'banner',
    mixins: [template_page_mixin],
    data() {
      return {
        swiperList: [
          { url: 'https://resource.tuniaokj.com/images/avatar/xiong/x1.jpg' },
          { url: 'https://resource.tuniaokj.com/images/avatar/xiong/x2.jpg' },
          { url: 'https://resource.tuniaokj.com/images/avatar/xiong/x3.jpg' },
          { url: 'https://resource.tuniaokj.com/images/avatar/xiong/x7.jpg' },
          { url: 'https://resource.tuniaokj.com/images/avatar/xiong/x13.jpg' },
        ],
        imageHeights: [], // 存储每张图片的高度
        imageWidths: [], // 存储每张图片的宽度
        cardCur: 0, // 当前显示的图片索引
        currentImageHeight: 750 ,// 当前显示的图片高度
        currentImageWidth: 0 // 当前显示的图片宽度
      };
    },
    methods: {
      onImageLoad(index, e) {
        // 获取图片的实际高度并存储
        const imageHeight = e.detail.height;
        const imageWidth = e.detail.width;
        this.$set(this.imageHeights, index, imageHeight);
        this.$set(this.imageWidths, index, imageWidth);
        
        // 如果当前加载的图片是当前显示的图片，则更新 currentImageHeight
        if (index === this.cardCur) {
          this.currentImageHeight = imageHeight * 750 / imageWidth;
        }
      },
      cardSwiper(e) {
        // 获取当前显示的图片索引
        const newIndex = e.detail.current;
        this.cardCur = newIndex;
        
        // 更新当前显示的图片高度
        this.currentImageHeight = this.imageHeights[newIndex] * 750 / this.imageWidths[newIndex] || 0;
      }
    },
    mounted() {
      // 初始化 imageHeights/imageWidths 数组
      this.swiperList.forEach((_, index) => {
        this.$set(this.imageHeights, index, 0);
        this.$set(this.imageWidths, index, 0);
        
      });
    }
  };
</script>

<style lang="scss" scoped>
  .template-swiper{
  }
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  
  .card-swiper {
    width: 100%;
  }
  
  image {
    display: block;
    width: 100vw;
    heigh: 750rpx;
  }
  
  /* 轮播指示点 start*/
  .indication{
    z-index: 9999;
    width: 100%;
    height: 36rpx;
    position: absolute;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }
  
  .spot{
    background-color: #000000;
    opacity: 0.3;
    width: 10rpx;
    height: 10rpx;
    border-radius: 20rpx;
    margin: 0 8rpx !important;
    position: relative;
  }
  
  .spot.active{
    opacity: 0.8;
    width: 20rpx;
    background-color: #000000;
  }
  
  .time{
    transition: all 0.6s ease-in-out;
    overflow: hidden;
  }
</style>