记录一下vue实现带缩略图得轮播图
swiper版本一定要对，高了或者低了都可能会出问题
1.引入swiper和vue-awesome-swiper插件
npm install swiper@4 --savenpm install vue-awesome-swiper@3 --save
2.在main.js中引入：
import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper)
3.使用：
template:布局
<div class="swiper_box"><swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop"><swiper-slide class="slide-1" v-for="(item,index) in bigImg" :key="index"><img :src="item" style="height:100%;width:100%" alt=""></swiper-slide></swiper><swiper style="margin-top:30px;" :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs"><swiper-slide class="slide" style="width:100px;height:100px;" v-for="(item,index) in bigImg" :key="index"><!-- <div class="imgItem"> --><img style="width:100px;height:100px;" :src="item" alt=""><!-- </div> --></swiper-slide></swiper></div>
data中配置：
bigImg: ['/it/u=3165657288,4248157545&fm=193&f=GIF','/it/u=2942499027,2479446682&fm=193&f=GIF','/it/u=2610975262,3538281461&fm=193&f=GIF','/it/u=4138158235,3956816634&fm=193&f=GIF','/it/u=2942499027,2479446682&fm=193&f=GIF','/it/u=2610975262,3538281461&fm=193&f=GIF',],swiperOptionTop:{// spaceBetween:10,effect:'fade',loop:true,loopedSlides:4,// zoom: true,//双击放大// navigation: {// nextEl: '.swiper-button-next',// prevEl: '.swiper-button-prev'// },observer: true,observeParents: true,grabCursor: true // 抓手},swiperOptionThumbs:{loop:true, //开启无限轮播 slidesPerView: 4, //显示几个图片spaceBetween: 10,//小图之间得距离 direction: 'horizontal',// centeredSlides: true, // 设置活动块居中grabCursor: true, // 抓手,slideToClickedSlide: true,watchSlidesVisibility: true // 防止不可点击},
4.最后添加控制器实现双向控制（要在updated中添加，在mounted中添加会underfind）
updated() {this.$nextTick(() => {// 实现swiper双向控制const swiperTop = this.$refs.swiperTop.swiperconst swiperThumbs = this.$refs.swiperThumbs.swiperswiperTop.controller.control = swiperThumbsswiperThumbs.controller.control = swiperTop})},
还有其他问题欢迎提问
