项目中使用了Swiper 的 “cube”,3d切换效果。但是动态从后台获取到图片以后,切换效果失效。静态页面切换效果就没任何问题

1、对比了好久这个问题,一度觉得是图片的问题,后来对比代码,包括拿循环到的数据放在静态页和一开始的数据,发现Swiper 提前初始化,但此时数据并未展示出来。

2、解决方法:

var swiper = new Swiper('.swiper-container', {
          initialSlide :0,

          // 添加如下两行
          observer:true,//修改swiper自己或子元素时,自动初始化swiper
          observeParents:true,//修改swiper的父元素时,自动初始化swiper

          effect: 'cube',
          loop : true,
          autoplay: {
            delay: 3000,
           
          },
      });

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个使用 Vue.js 手写实现层叠卡片滑动切换、卡牌动态滑动切换效果的示例: HTML 代码: ```html <div id="app"> <div class="card-container" ref="cardContainer"> <div class="card" v-for="(item, index) in cardList" :key="index" :style="{ zIndex: 100 - index, transform: 'translateX(' + (index - currentIndex) * 20 + 'px) scale(' + (10 - index) / 10 + ')' }"> <div class="card-header">{{ item.title }}</div> <div class="card-body">{{ item.content }}</div> </div> </div> <div class="pagination"> <span class="dot" v-for="(item, index) in cardList" :key="index" :class="{ active: index === currentIndex }" @click="handleDotClick(index)"></span> </div> </div> ``` CSS 代码: ```css .card-container { position: relative; width: 100%; height: 300px; overflow: hidden; } .card { position: absolute; left: 50%; transform-origin: center left; width: 80%; height: 80%; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; padding: 10px; transition: transform 0.5s ease-in-out, z-index 0.5s; } .card-header { font-weight: bold; font-size: 18px; } .card-body { margin-top: 10px; } .pagination { margin-top: 20px; text-align: center; } .dot { display: inline-block; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #ccc; cursor: pointer; } .dot.active { background-color: #333; } ``` JavaScript 代码: ```javascript new Vue({ el: '#app', data: { currentIndex: 0, cardList: [ { title: 'Card Title 1', content: 'Card Content 1' }, { title: 'Card Title 2', content: 'Card Content 2' }, { title: 'Card Title 3', content: 'Card Content 3' }, { title: 'Card Title 4', content: 'Card Content 4' }, { title: 'Card Title 5', content: 'Card Content 5' } ] }, mounted() { this.$refs.cardContainer.addEventListener('mousedown', this.handleMouseDown); this.$refs.cardContainer.addEventListener('mousemove', this.handleMouseMove); this.$refs.cardContainer.addEventListener('mouseup', this.handleMouseUp); this.$refs.cardContainer.addEventListener('mouseleave', this.handleMouseLeave); }, destroyed() { this.$refs.cardContainer.removeEventListener('mousedown', this.handleMouseDown); this.$refs.cardContainer.removeEventListener('mousemove', this.handleMouseMove); this.$refs.cardContainer.removeEventListener('mouseup', this.handleMouseUp); this.$refs.cardContainer.removeEventListener('mouseleave', this.handleMouseLeave); }, methods: { handleDotClick(index) { this.currentIndex = index; }, handleMouseDown(event) { this.mouseDown = true; this.startX = event.clientX; }, handleMouseMove(event) { if (this.mouseDown) { const offsetX = event.clientX - this.startX; this.$refs.cardContainer.style.transform = 'translateX(' + (this.currentIndex * -20 + offsetX) + 'px)'; } }, handleMouseUp(event) { this.mouseDown = false; const offsetX = event.clientX - this.startX; const threshold = this.$refs.cardContainer.offsetWidth / 4; if (offsetX > threshold && this.currentIndex > 0) { this.currentIndex--; } else if (offsetX < -threshold && this.currentIndex < this.cardList.length - 1) { this.currentIndex++; } this.$refs.cardContainer.style.transform = 'translateX(' + (this.currentIndex * -20) + 'px)'; }, handleMouseLeave(event) { this.mouseDown = false; this.$refs.cardContainer.style.transform = 'translateX(' + (this.currentIndex * -20) + 'px)'; } } }); ``` 在这个示例,我们手写实现了层叠卡片滑动切换、卡牌动态滑动切换效果使用 Swiper 插件。具体来说,我们首先在 HTML 创建了一个 `.card-container` 容器,然后在其创建了若干个 `.card` 卡片容器,每个卡片容器包含了一个 `.card-header` 和 `.card-body` 容器作为卡片的内容。我们使用了 Vue.js 的数据绑定机制动态渲染了卡片容器,并使用了 CSS3 的 `transform` 属性和 `z-index` 属性来实现层叠效果。 在 JavaScript ,我们监听了鼠标的 `mousedown`、`mousemove`、`mouseup` 和 `mouseleave` 事件,并在 `handleMouseDown` 方法记录了鼠标按下的起始位置,然后在 `handleMouseMove` 方法根据鼠标移动的距离动态更新卡片容器的 `transform` 属性,实现卡片的动态滑动效果。在 `handleMouseUp` 方法,我们根据鼠标移动的距离和速度判断当前应该显示哪一个卡片,并根据计算结果更新了 `currentIndex` 属性和卡片容器的 `transform` 属性。在 `handleMouseLeave` 方法,我们重置了鼠标按下的状态和卡片容器的 `transform` 属性,保证了用户体验的连贯性。最后,我们在 `mounted` 钩子函数添加了事件监听器,并在 `destroyed` 钩子函数移除了事件监听器,以避免内存泄漏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值