【vue3+ant design】vue3中使用轮播插件a-carousel

最新推荐文章于 2024-03-21 11:03:35 发布

人鱼小姐ww

最新推荐文章于 2024-03-21 11:03:35 发布

阅读量1.6k

点赞数

文章标签：前端 vue anti-design-vue

本文链接：https://blog.csdn.net/weixin_42255789/article/details/132067276

版权

【vue3+ant design】vue3中使用轮播插件a-carousel

版本

“vue”: “^3.2.25”,
“ant-design-vue”: “^3.0.0-beta.9”,

功能截图

在这里插入图片描述
功能点：（1）鼠标悬浮暂停，离开继续轮播（2）点击放大按钮暂停轮播，离开继续轮播

template部分代码

 <a-carousel :autoplay="autoplay"    :ref="(el) => getZpRef(el, item)">
   <div
     class="main-content"
     v-for="(params, index) in imageUrlList"
   >
     <img :src="params" alt="" />
     <span
       class="view-fangda"
       @click.prevent="preview(index)"
     ></span>
   </div>
 </a-carousel>

遇到的几个问题

（1）如何实现点击放大暂停轮播，缩小继续轮播功能
起初想通过控制autoplay实现放大暂停轮播，发现停止之后再设置autoplay为true就没有效果了，查找了多方文档，都无效。于是放弃了，那怎么实现这个功能呢。

	实现思路：点击放大时，记住当前轮播图的位置，当关闭放大功能时，让插件跳到当时记录的轮播图位置。

（2）由于我的轮播功能在页面多处使用（循环了），所以在这里绑定ref时要使用动态绑定的方式

const getZpRef = (el, item) => {
  if (el) {
    zpswiperRefs[item.id] = el;
  }
}

（3）到这是不是以为在点击缩小的时候直接拿对应的第几个ref调用插件的方法就可以了，不！事情根本没有这么顺利！在点击放大，缩小按钮的时候，都会进入getZpRef 方法(还没明白为什么，有知道的小伙伴在后台滴滴我一下，谢谢）。无奈只能在getZpRef 方法里去判断是否需要执行插件的跳转功能
isNeedGoTo 是用来判断是否需要调整功能的参数

const getZpRef = (el, item) => {
  if (el) {
    zpswiperRefs[item.id] = el;
  }
  **if (isNeedGoTo.value) {
  zpswiperRefs[item.id].goTo(ViewIndex.value,true);
  }**
}