Vue Slide Show 基于Vue的轮播图组件
vue的轮播图是通过vue-awesome-swiper来实现的,及时vue版的swiper
可以在github.com 上搜索 vue-awesome-swiper来参考一下
1.安装 vue-awesome-swiper指定版本
npm i vue-awesome-swiper@2.6.7 --save
npm install vue-awesome-swiper@3.1.1 --save-dev
注意!先开始安装我是使用 vue-awesome-swiper最新版本4.11,但是在ios10上有轮播图不轮播的兼容性bug,为了解决这个问题,所以安装了比较旧3.1.1 或者2.6.7版本 一般都使用这个版本,要不然后面很多bug 难搞哦.
2.在component文件夹里新建Swipe.vue组件,然后写入如下:
html
<template>
//用来设置属性 效果
<swiper :options="swiperOptions">
<swiper-slide class="classify_item" v-for="(item,index) in picList" :key="index">
<img :src="item.src" width="100%" >
</swiper-slide>
//图片中的小圆点
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
js
<script>
export default {
name: "Swiper", // 此处不能用Swiper作为name,否则报错
data() {
return {
//和上面绑定的一致
swiperOptions: {
pagination: ".swiper-pagination", // 轮播图的点
loop:true, // 循环
observer: true, // 修改swiper自己或子元素时,自动初始化swiper
observeParents: true, // 修改swiper的父元素时,自动初始化swiper
//paginationType: "fraction", 分页的样式 ‘fraction’ 分式
},
picList:[
{id:0,src:'https://gtms01.alicdn.com/tps/i1/T1Ww_JFEpdXXcZd9sr-640-200.png'},
{id:1,src:'https://gw.alicdn.com/imgextra/i3/149/O1CN01wekXPw1CyHZ23AC4R_!!149-0-lubanu.jpg'}
]
};
}
};
</script>
在放置左右切换按钮时候(想要更换箭头图片可以这样写)
<!-- 左箭头 -->
<div class="swiper-button-prev" slot="button-prev">
<img src="引入自己想要的图片地址" style="width: 100%; height: 100%" />
</div>
<!-- 右箭头 -->
<div class="swiper-button-next" slot="button-next">
<img src="" style="width: 100%; height: 100%" />
</div>