vue使用siwper走马灯

效果

1：在单独文件中使用

	 <!-- Top -->
      <swiper ref="mySwiper" :options="swiperOption" class="gallery-top">
        <swiper-slide class="swiper-slide1" v-for="(item, index) in ListPic" :key="index">
           <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 450px">
            <img style="max-width: 100%; max-height: 100%" :src="item" />
          </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>
      <!-- Bottom -->
      <swiper ref="mySwiper2" :options="swiperOption2" class="gallery-thumbs">
        <swiper-slide class="swiper-slide2" v-for="(item, index) in ListPic" :key="index">
          <el-image style="width: 50px; height: 50px" :src="item" fit="cover"></el-image>
        </swiper-slide>
      </swiper>

	  //走马灯
      //top
      swiperOption: {
        //显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          watchSlidesVisibility: true, //避免出现bug具体干啥咱也不清楚只能跟着写上去
        },
        //设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          hideOnClick: true,
        },
        //开启循环模式
        // loop: true, //自动循环
        //speed: 5000, //自动播放 一秒滑动一次
      },
      //bottom
      swiperOption2: {
        spaceBetween: 10,
        centeredSlides: true, //true 为居中
        slideToClickedSlide: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
      },

放在点击事件里面调用 加载图片的时候调用

this.$nextTick(() => {
        const mySwiper = this.$refs.mySwiper.$swiper; //top
        const mySwiper2 = this.$refs.mySwiper2.$swiper;
        mySwiper.controller.control = mySwiper2;
        mySwiper2.controller.control = mySwiper;
      });

样式

/* 走马灯 */
.swiper-slide2 {
  margin: 15px 0 0 0;
}
.swiper-slide2:hover {
  cursor: pointer;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
  height: 80% !important;
  width: 100%;
}
.gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  width: 7%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}

2：放在组件中使用

Swiper.vue

<template>
  <div>
    <div @click="show = true">
      <slot></slot>
    </div>
    <el-dialog title="查看图片" :visible.sync="show" width="700px" :close-on-click-modal="false">
      <!-- Top -->
      <swiper ref="mySwiper" :options="swiperOption" class="gallery-top">
        <swiper-slide class="swiper-slide1" v-for="(item, index) in list" :key="index">
          <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 450px">
            <img style="max-width: 100%; max-height: 100%" :src="item" />
          </div>
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
      <!-- Bottom 分页器-->
      <swiper ref="mySwiper2" :options="swiperOption2" class="gallery-thumbs">
        <swiper-slide class="swiper-slide2" v-for="(item, index) in list" :key="index">
          <el-image style="width: 50px; height: 50px" :src="item" fit="cover"></el-image>
        </swiper-slide>
      </swiper>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Preview',
  props: {
    list: {
      type: Array,
      defalut: () => [],
    },
  },
  data() {
    return {
      show: false,
      //top
      swiperOption: {
        //显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          watchSlidesVisibility: true, //避免出现bug具体干啥咱也不清楚只能跟着写上去
        },
        //设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          hideOnClick: true,
        },
        //开启循环模式
        // loop: true, //自动循环
        //speed: 5000, //自动播放 一秒滑动一次
      },
      //bottom
      swiperOption2: {
        spaceBetween: 10,
        centeredSlides: true, //true 为居中
        slideToClickedSlide: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
      },
    };
  },
  watch: { //很重要！！！这里仔细看吧 你会明白的
    show(value) {
      if (value) {
        this.$nextTick(() => {
          const mySwiper = this.$refs.mySwiper.$swiper; //top
          const mySwiper2 = this.$refs.mySwiper2.$swiper;
          console.log(mySwiper);
          console.log(mySwiper2);
          mySwiper.controller.control = mySwiper2;
          mySwiper2.controller.control = mySwiper;
        });
      }
    },
  },
  methods: {},
  mounted() {
    // console.log(this.show);
    // if (this.show) {
    //   this.$nextTick(() => {
    //     const mySwiper = this.$refs.mySwiper.$swiper; //top
    //     const mySwiper2 = this.$refs.mySwiper2.$swiper;
    //     console.log(mySwiper);
    //     console.log(mySwiper2);
    //     mySwiper.controller.control = mySwiper2;
    //     mySwiper2.controller.control = mySwiper;
    //   });
    // }
  },
};
</script>

<style lang="scss" scoped>
/* 走马灯 */
.swiper-slide2 {
  margin: 15px 0 0 0;
}
.swiper-slide2:hover {
  cursor: pointer;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
  height: 80% !important;
  width: 100%;
}
.gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  width: 7%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
</style>

使用

//HTML
<ux-table-column title="图片" field="pic" width="150" align="center">
          <template scope="scope">
          <!-- photoList 是数组 -->
            <preview :list="scope.row.photoList">
              <el-button type="primary" size="mini" :disabled="!scope.row.pic && !scope.row.attachedPic"
                >查看</el-button
              >
            </preview>
          </template>
</ux-table-column>
//js
import Preview from '@/components/Swiper/Swiper';
export default{
  components: {
    Preview,
  },
}