aaa

doum

2026-06-04 08e9a67dd679f311e79a27b04cd0c53a30b4bccf

 h5/components/bigImg.vue

@@ -1,21 +1,39 @@
<template>
   <view class="img" :style="{ opacity: opacity, zIndex: zindex }">
      <view class="img_content">
   <view class="img" :class="{ 'img--open': opacity === 1 }" :style="{ opacity: opacity, zIndex: zindex }" @click="close">
      <view class="img_content" @click.stop>
         <view class="img_content_tu">
            <image class="left" src="@/static/ic_left@2x.png" mode="widthFix" @click="jian"></image>
            <image
               v-if="imgList.length > 1"
               class="arrow"
               src="@/static/ic_left@2x.png"
               mode="widthFix"
               @click="prev"></image>
            <view class="img_content_tu_nr">
               <swiper style="width: 100%; height: 100%;" @change="handlechange" :current="mycurrent" :indicator-dots="false"  :circular="true" :interval="1000" :duration="1000">
                  <swiper-item v-for="(item,index) in imgList" :key="index">
                     <view :class="['swiper-item',index == mycurrent ? 'active' : '']">
                        <image :src="item" style="width: 150%;height: 150%;" mode="aspectFit" />
               <swiper
                  style="width: 100%; height: 100%;"
                  @change="handlechange"
                  :current="mycurrent"
                  :indicator-dots="imgList.length > 1"
                  indicator-color="rgba(255,255,255,0.35)"
                  indicator-active-color="#ffffff"
                  :circular="imgList.length > 1"
                  :duration="300">
                  <swiper-item v-for="(item, index) in imgList" :key="index">
                     <view class="swiper-item">
                        <image :src="item" class="preview-image" mode="aspectFit" />
                     </view>
                  </swiper-item>
               </swiper>
            </view>
            <image class="right" src="@/static/ic_right@2x.png" mode="widthFix" @click="add"></image>
            <image
               v-if="imgList.length > 1"
               class="arrow"
               src="@/static/ic_right@2x.png"
               mode="widthFix"
               @click="next"></image>
         </view>
         <view class="img_content_close">
            <image src="@/static/ic_close@2x.png" mode="widthFix" @click="close"></image>
         <view class="img_content_close" @click="close">
            <image src="@/static/ic_close@2x.png" mode="widthFix"></image>
         </view>
      </view>
   </view>
@@ -37,20 +55,20 @@
         }
      },
      methods: {
         add() {
            if (this.imgList.length - 1 === this.mycurrent) return
            this.mycurrent++
         next() {
            if (this.imgList.length <= 1) return
            this.mycurrent = (this.mycurrent + 1) % this.imgList.length
         },
         jian() {
            if (this.mycurrent === 0) return
            this.mycurrent--
         prev() {
            if (this.imgList.length <= 1) return
            this.mycurrent = (this.mycurrent - 1 + this.imgList.length) % this.imgList.length
         },
         handlechange(e){
            this.mycurrent=e.detail.current
         handlechange(e) {
            this.mycurrent = e.detail.current
         },
         open(i) {
            this.mycurrent = i
            this.zindex = 3
            this.mycurrent = i || 0
            this.zindex = 9999
            this.opacity = 1
         },
         close() {
@@ -65,77 +83,76 @@
   .img {
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.4);
      background: rgba(0, 0, 0, 0.65);
      position: fixed;
      transition: .2s;
      transition: opacity 0.2s;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
		
      pointer-events: none;

      &.img--open {
         pointer-events: auto;
      }

      .img_content {
         display: flex;
         flex-direction: column;
         pointer-events: auto;

         .img_content_tu {
            display: flex;
            align-items: center;

            .img_content_tu_nr {
               width: 600px;
               height: 600px;
               padding: 30px;
               padding: 24px;
               box-sizing: border-box;
               background: rgba(255,255,255,0.9);
               background: rgba(255, 255, 255, 0.95);
               border-radius: 8px;
               margin: 0 32px;
               margin: 0 24px;
               display: flex;
               align-items: center;
               flex-wrap: nowrap;
               .swiper-item{
               justify-content: center;

               .swiper-item {
                  width: 100%;
                  border-radius: 30rpx;
                  overflow: hidden;
                  // 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果
                  // 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
                  // width: 450rpx;
                  height: 100%;
                  // transform: scale(1);
                  // transition: all 0.5s ease;
                  text-align: center;
                  // transition: all 0.5s ease-in-out;
                  display: flex;
                  align-items: center;
                  justify-content: center;
               }
               .img_content_tu_nr_item {

               .preview-image {
                  width: 100%;
                  height: 600px;
                  image {
                     width: 100%;
                     height: 100%;
                  }
                  height: 100%;
               }
            }
            .left {
               width: 80px;
               height: 80px;
               cursor: pointer;
            }
            .right {
               width: 80px;
               height: 80px;

            .arrow {
               width: 64px;
               height: 64px;
               flex-shrink: 0;
               cursor: pointer;
            }
         }

         .img_content_close {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 40px;
            margin-top: 32px;
            cursor: pointer;

            image {
               width: 60px;
               height: 60px;
               cursor: pointer;
               width: 56px;
               height: 56px;
            }
         }
      }
   }
</style>
</style>