时间戳

首页 > 解决方案 > Vue v-for 在幻灯片中没有正确渲染阴影

jquery - Vue v-for 在幻灯片中没有正确渲染阴影

问题描述

我正在尝试在我的 Vue 项目中使用iDangero.us Swiper 。除了幻灯片中的阴影外，一切正常。每次分页后，阴影都会变得越来越大，越来越暗。圆圈结束后，我又回到第二张幻灯片，阴影再次恢复正常。

这是插图，发生了什么：

在此处输入图像描述

这就是我正在做的事情：

<template>
  <div class="product-slider">
    <div class="product-slider__wrp swiper-wrapper">
      <product-slide :item="item" v-for="item in items" :key="item.id"/>
    </div>
  <div class="product-slider__pagination"></div>
</div>
</template>



  data() {
    return {

      swiperOptions: {
        vertical: true,
        spaceBetween: 30,
        effect: 'fade',
        loop: true,
        mousewheel: {
          invert: false,
        },
        // autoHeight: true,
        pagination: {
          el: '.product-slider__pagination',
          clickable: true,
        }
      },
    };
  },

  mounted(){
    const swiper = new Swiper('.product-slider', {
      spaceBetween: 30,
      effect: 'fade',
      loop: true,
      mousewheel: {
        invert: false,
      },
      // autoHeight: true,
      pagination: {
        el: '.product-slider__pagination',
        clickable: true,
      }
    });
    swiper.slideTo(3, 1000, false)
  },

这是幻灯片组件：

<template>
<div class="product-slider__item swiper-slide">

  <div class="product-slider__img">
    <inner-slick-slider :images="item.imageUrl" :imageTitle="item.title | decrypt"/>
  </div>

  <div class="product-slider__content">
    <span class="product-slider__code"> test </span>
  </div>

</div>
</template>

这是幻灯片组件上的阴影：box-shadow: 4px 13px 30px 1px rgba(112, 137, 249, 0.2);

我尝试了所有可以从谷歌找到的东西。还尝试在更新和更新之前重新渲染等。我做错了什么？任何帮助深表感谢！

标签： jqueryhtmlcssvue.js

解决方案

嗨，实际上问题是由于过渡和 box-shadow CSS 而出现的。

在代码中，CSS 应用于所有 div，因此我已将其删除并仅在当前处于活动状态的 img 上添加了 box-shadow。

我在这里添加了 box shadow css。

&.swiper-slide-active {
  .blog-slider__img {
    box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
    img {
      opacity: 1;
    transition-delay: .3s;

    }
  }

并从下面的类中删除了 box shadow css。

&__img {
     // width: 40%;
    width: 300px;
    flex-shrink: 0;
    height: 300px;
    background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);

    border-radius: 20px;
    transform: translateX(-80px);

    overflow: hidden;

    &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
      border-radius: 20px;
    opacity: 0.8;
}

这是更新的codepen的链接。

推荐阅读