vue中使用轮播插件
在vue2中使用轮播插件vue-awesome-swiper,功能包括自动轮播,点击查看大图, 查看大图功能使用的是element-ui中的<e-image/>
下面来安装使用
1.安装对应的版本
在vue2中需要安装对应的版本,在安装vue-awesome-swiper的同时也需要安装swiper组件。
对应版本如下:
vue-awesome-swiper@3.1.3
swiper@4.0.7
npm install vue-awesome-swiper@3.1.3 --save
npm install swper@4.0.7 --save
or
cnpm install vue-awesome-swiper@3.1.3 --save
cnpm install swper@4.0.7 --save
$\color{red} {提示:如果版本不同,可能引用css的时候会出现冲突,或者明明写对了,就是显示不出效果} $
引用轮播组件
index.vue
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
$\color{red}{这里的css引入,需要去node包里面看看存放在swiper里面的哪个文件夹}$
下面是index.vue的使用和配置
<template>
<div>
<swiper
class="swiper"
ref="mySwiper"
:options="swiperOption"
v-if="productList.length > 1"
>
<swiper-slide
v-for="(item, index) in productList"
:key="index"
>
<a
target="_blank"
:href="item.url"
>
<div class="honorShow">
<div class="pic">
<img
:src="item.covers[0].path"
alt=""
srcset=""
>
</div>
</div>
</a>
</swiper-slide>
<!-- <div
class="swiper-pagination"
slot="pagination"
/>
<div
class="swiper-button-prev"
slot="button-prev"
/>
<div
class="swiper-button-next"
slot="button-next"
/> -->
</swiper>
<imageView
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="prosrcList1"
:initial-index="initNum"
/>
</div>
</template>
<script type="text/javascript">
import {
getHomeProduct
} from '@/api/home'
import imageView from 'element-ui/packages/image/src/image-viewer'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
data() {
const that = this
return {
initNum: 0,
swiperOption: {
observer: true, // 修改swiper自己或子元素时,自动初始化swiper
observeParents: true, // 修改swiper的父元素时,自动初始化swiper
slidesPerView: 5,
spaceBetween: 5,
slidesPerGroup: 5,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
on: {
click: function () {
that.imgViewerVisible = true
const index = this.clickedIndex - this.activeIndex + this.realIndex
that.initNum = index
}
}
},
}
},
mounted() {
// 初始化完成
this.getHomeProduct()
},
methods: {
getHomeProduct() {
const data = {
page: 1,
limit: 5
}
getHomeProduct(data).then((res) => {
this.productList = res.data
console.log('===')
const arr = []
this.productList.map((res) => {
arr.push(res.covers[0].path)
return 0
})
this.prosrcList1 = arr
})
},
}
}
</script>
写完之后是这个样式,因为不需要左右按钮和下面的小点点,就注释了
上面就是整个轮播的代码,具体的样式需要自己去调整,使用:deep()或者/deep/
点击查看大图
至于查看大图,就是使用了element-ui中<e-image/>
组件
可以直接使用e-image
组件,也可以跟我这样直接去引用node包中查找element-ui下面的packages包中的image-viewer.vue
$\color{red}{点击轮播查看大图,因为轮播组件在loop这个属性设置为true之后,轮播的图片就会复制一遍出来,那么被复制的图片节点是绑定不了事件的就需要在轮播组件的option中去添加on事件,如下}$
swiperOption: {
observer: true, // 修改swiper自己或子元素时,自动初始化swiper
observeParents: true, // 修改swiper的父元素时,自动初始化swiper
slidesPerView: 5,
spaceBetween: 5,
slidesPerGroup: 5,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
on: {
click: function () {
that.imgViewerVisible = true
const index = this.clickedIndex - this.activeIndex + this.realIndex
that.initNum = index
}
}
},
需要去添加slidesPerGroup轮播组,就是slidesPerView是一组分几个,slidesPerGroup是分几组,这样就可以通过const index = this.clickedIndex - this.activeIndex + this.realIndex
,求得当前点击的下标
嗯,还有一个问题就是,image-viewer.vue中的:url-list="prosrcList1"
对象需要传入的格式如下
imgs: [
'aaa.png',
'bbb.png',
'ccc.png'
]
差不多内容就是这样,后续有什么需要修改的,会再次更新~~~