更新众多VIP页面模板

vipPage/life/active/active.vue

@@ -0,0 +1,175 @@
+<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>