写在前面:

现成的轮播插件是很方便,如果只是对文本类的数据进行轮播就很容易满足需求。但是,实际开发中,表格中可能还嵌套了自己封装的组件,组件中又是通过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 使用举例

  • 官网(Vue2):示例(适用于Vue2)

3.3 踩坑

  1. 在循环轮播的时候,第二轮循环的时候无法加载封装的echarts组件,文本可以正常显示,但是echarts组件的位置显示空白。
  2. 结合echarts也无法实现左右轮播。

【Vue轮播插件】常用的vue轮播插件整理相关推荐

  1. html网易云音乐图片轮播效果,Vue之网易云音乐PC版轮播图的实现

    Github - program-learning-lists 最近在刷网易云音乐歌单时发现首页的轮播图很有意思,正好自己想尝试做一个PC版的网易云音乐,于是就是使用Vue去做这个demo,废话少说, ...

  2. 利用swiper在vue中做轮播图,并改变轮播图的原有箭头、图片等内容

    目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...

  3. 常用插件的封装(轮播图、选项卡、楼梯导航及、拖拽)

    PC端轮播图 1. 第一种轮播图(自动慢慢滑动,多用于展示) HTML部分: <div id="box"> <ul id="banner"&g ...

  4. VUE常用UI组件插件及框架-vue前端UI框架收集

    UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...

  5. swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图

    Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用 话不多说,直接上教程 1.首先加载插件,需要用到 ...

  6. html图片百叶窗轮播,纯js百叶窗效果轮播图插件

    这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法 在页面中引入imgSwitch.min.js ...

  7. 包含Demo示例,包含实列,vue插件汇总,vue组件大全,

    目录 一.UI组件及框架 二.滚动scroll组件 三.slider组件 四.编辑器 五.图表 六.日历 七.地址选择 八.地图 九.播放器 十.文件上传 十一.图片处理 十二.提示 十三.进度条 十 ...

  8. 移动端开发常用的vue组件

    在移动端的开发过程中,涉及到了许多优秀的组件,在此记录下来,以供以后查询: 1.tab 页切换,支持左右滑动,通常结合 swiper 进行使用 GitHub - ScoutYin/ly-tab: A ...

  9. Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令

    目录 一.VueJS是什么? 二.Vue的优缺点 三.MVVM 数据双向绑定 四.Vue的安装和使用 五.Vue模板语法-文本渲染 六.常用的vue的指令 一.VueJS是什么? 它是一个轻量级MVV ...

最新文章

  1. 大开源时代,“仁慈的独裁者”管理模式还走得通吗?
  2. 滚动条的出现导致居中的元素会晃动
  3. 旅游网站的主页代码_一个在优化的网站主页内容应该如何设计?
  4. scrapy proxy and user_agent
  5. Codeforces D. Fair 多源BFS求最短路
  6. 【CV论文阅读】:Rich feature hierarchies for accurate object detection and semantic segmentation...
  7. 初学React,setState后获取到的thisstate没变,还是初始state?
  8. Part1 R语言的基本操作
  9. jzoj3736. 【NOI2014模拟7.11】数学题
  10. 空间中任一点到超平面的距离公式的推导过程
  11. 深度神经网络的正则化
  12. 【官方】下载最新adb及安装驱动的方法
  13. 离散系统的李雅普诺夫稳定判据
  14. 边框虚线html代码是,网页虚线代码/表格边框虚线代码大全
  15. CSS 美化checkbox
  16. 第十二周 项目一--图基本算法库
  17. 小程序引用公共js,不看可惜了!!
  18. 信号完整性分析系列——1基本概念
  19. Gitlab上传代码时报错文件太大无法上传
  20. vue后端返回数据流 前端导出下载xls文件

热门文章

  1. 3dmax:3dmax三维VR渲染设置(VR发光贴图、VR灯光缓存、V-Ray焦散,渲染图中出现黑斑点的原因、插值类型)之详细攻略
  2. 图片处理系列:png图片背景色改为透明
  3. Vue2Editor 中文API
  4. 码支付如何对接网站_码支付,对接自己的网站教程,再也不怕某些支付平台跑路了...
  5. 【答学员问】面试问题-毕业时候为什么没有选择开发
  6. php中文数组按拼音排序问题
  7. hbuilder 打包 php,HBuilder 打包流程
  8. 一次代码评审,差点过不了试用期!
  9. C语言程序设计入门——平均值
  10. DBMS_SQL的使用