写在前面:

现成的轮播插件是很方便,如果只是对文本类的数据进行轮播就很容易满足需求。但是,实际开发中,表格中可能还嵌套了自己封装的组件,组件中又是通过echarts图表来实现的。这个时候,这些vue插件多多少少都会出现bug,真是令人头疼啊…思前想后,还是把最近查到的知识整理一下,方便以后查看。


1. vue-seamless-scroll

1.1 基本介绍
  1. 官网:vue-seamless-scroll
    【备注】安装、引入等官网都已经写的很清楚了。
1.2 使用举例
  • 官网的案例就足够了:示例
1.3 踩坑
  1. 在循环轮播的时候,第二轮循环的时候无法加载封装的echarts组件,文本可以正常显示,但是echarts组件的位置显示空白。
  2. 结合echarts也无法实现左右轮播。

2. vue-concise-slider

2.1 基本介绍
  1. 官网:vue-concise-slider
2.2 使用举例
  • 同样是官网的案例就够了:示例
2.3 踩坑
  1. 可以结合echarts组件,实现左右、自动、循环轮播效果。
  2. 无法实现上下的循环轮播,无法循环。

3. vue-awesome-swiper

3.1 基本介绍
  1. 官网:vue-awesome-swiper
    【备注】也有中文网,但是感觉少了点东西,最好直接看英文的吧。
  2. 安装、引入参考这篇文章:
    vue中使用swiper插件
3.2 使用举例
3.3 踩坑
  1. 在循环轮播的时候,第二轮循环的时候无法加载封装的echarts组件,文本可以正常显示,但是echarts组件的位置显示空白。
  2. 结合echarts也无法实现左右轮播。
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐