vue项目使用swiper完成垂直滚动_新闻列表功能

前言

在vue项目中使用swiper+vue-awesome-swiper实现一个上下滚动的跑马灯/新闻列表/图片列表，有数据时展示列表，没数据时自定义说明。

效果如下：一个页面中展示4个列表（或图片）,列表向上滚动，鼠标移入停止滚动且显示title，鼠标移出滚动再次开启，有分页

当没有数据时，页面会显示“当前一切正常

vue+swiper@4.5.1+vue-awesome-swiper@2.6.7

在vue项目中，滚动列表用的是vue-awesome-swiper，因为awesome-swiper依赖于swiper，所以二者都需要下载

vue-awesome-swiper@2.6.7的配置项用法和内容，可查看swiper3官网API，地址如下：

https://3.swiper.com.cn/api/index.html

注意版本，不同swiper版本的配置写法不同，经查阅4或5版本是比较稳定。其余版本可能会造成缺陷，所以仅供参考！

注意API，不同版本vue-awesome-swiper对应的swiper不一样，导致同一个事件的事件名并不同，比如鼠标移入hover停止滚动事件，常见解答用swiper.autoplay.stop()但在该项目没有用，这就要考虑一下版本问题。

是打印swiper的dom:debugger查看this.$refs.mySwiper.swiper带的方法，在2.6.7版本中发现了

stopAutoplay，网上搜索stopAutoplay就找到了swiper3的文档

npm install vue-awesome-swiper@2.6.7 -save
npm install swiper@4.5.1 -save

//main.js
import 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

import AwesomeSwiper from '@/components/scroll/awesome-swiper'

vue JavaScript