vue-awesome-swiper 缩略图的简单使用

本文所使用的是swiper5
1.安装：npm install swiper vue-awesome-swiper --save
2.全局引入（main.js）

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
2.1 这里要特别注意，百度有有很在引入样式文件的时候报错（import 'swiper/dist/css/swiper.css'  ），我们这里没有dist，如果不报错，用哪个都可以吧，反正的vue项目里面是报错的
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3.在组件中使用

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
components: {
  Swiper,
  SwiperSlide
},
data () {
  return {
    isInit: 0,
// 这个图片我是在京东的网站借用，应该可以用
    banner: [
      '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/84806/28/1227/87640/5dbbf771Ecc3cbae1/f16aae16aedff936.jpg!cr_1125x445_0_171!q70.jpg.dpg',
      '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/104161/34/18850/78056/5e981187E50d575ad/f7fc0734e76687b8.jpg!cr_1125x445_0_171!q70.jpg.dpg',
      '//m.360buyimg.com/mobilecms/s700x280_jfs/t1/95842/38/12546/80187/5e4ba3e7E09e0da3b/92aac67aefdf6b6f.jpg!cr_1125x445_0_171!q70.jpg.dpg'
    ],
    swiperOptionTop: {
     zoom: true, // 开启缩放功能
      observer: true,
      observeParents: true,
      loop: true,
      loopedSlides: 5, // looped slides should be the same
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    },
    swiperOptionThumbs: {
      loop: true,
      loopedSlides: 5, // looped slides should be the same
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true
    }
  }
},
mounted () {
  this.$nextTick(() => {
    const swiperTop = this.$refs.swiperTop.$swiper
    const swiperThumbs = this.$refs.swiperThumbs.$swiper
    swiperTop.controller.control = swiperThumbs
    swiperThumbs.controller.control = swiperTop
  })
}
}
</script>

4.可以看一下github里面的一些demo,这里面有好多，写的非常详细，这个链接才是最重要的，一看就懂
[非常重要]】https://github.surmon.me/vue-awesome-swiper

后续更新，vue-awesome-swiper 的方法(2020/05/30号)
我也百度过其他人的用法，他们都是this. $refs.mySwiper.swiper，少一个$ 符号，可能是以前他们这样可以吧，但是我用的时候如果不加 $符号，会报错，swiper什么的未定义，后来认真看了以后，发现前面要加$ ,不知道是不是更改了

 computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  }

methods里面，我这里是轮播图预览，点击哪一张就是哪一张，不用从第一张开始

  handlePreview (index) {
      this.dialogVisible = true
      this.swiper1.slideTo(index, 1000, false)
    }

6.我的项目中使用了element-ui,当时我的轮播图预览使用了element-ui里面的dialog,大概的意思就是dialog包裹了vue-awesome-swiper组件，所以拿不到里面swiper,即使使用ref也拿不到，还有就是这里如果用v-if也不行，只能用v-show，v-if是创建元素

    <div class="isShowWorkSwiperList" v-show="isShowWorkSwiperList">
        <div class="btn_close"><van-icon name="cross" color="#ccc" size="30px" @click="handleBtnClose" /></div>
        <swiper class="swiper albumlist" :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="(item,index) in workSwiperList" :key="index">
                <div class="swiper-zoom-container"><img v-lazy="cosServer + item.imageurl+ '/1280'" alt /></div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
    </div>

最后编辑于：2020.05.30 19:47:42