vue2使用轮播组件swiper

项目界面展示效果

20220519_103142.gif

使用 "vue-awesome-swiper": "^3.1.3"组件（最好对应版本）

npm install vue-awesome-swiper@3.1.3 --save 

代码

<template>
  <div class="lm-container">
    <div class="lm-container-left"></div>
    <div class="lm-container-right">
      <div class="lm-container-right-title">人员抓拍</div>
      <div class="lm-container-right-block" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide v-for="i in list" :key="i">
            <take-capture />
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import TakeCapture from "./component/takeCapture.vue";
export default {
  name: "LargeManager",
  components: {
    TakeCapture,
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        direction: "vertical",
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        slidesPerView: "auto",
        // loopedSlides: 3,
        //显示分页
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true //允许分页点击跳转
        // }
      },
      list: [1, 2, 3, 4, 5, 6]
    };
  },
  mounted() {},
  methods: {
    on_bot_enter() {
      this.$refs.mySwiper.swiper.autoplay.stop();
    },
    on_bot_leave() {
      this.$refs.mySwiper.swiper.autoplay.start();
    },
  }
};
</script>

<style lang="less" scoped>
.lm-container {
  display: flex;
  height: 100%;
  width: 100%;
  &-left {
    flex: 1;
  }
  &-right {
    width: 600px;
    padding: 0 20px;
    &-title {
      width: 80px;
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: bold;
      color: #60c6d4;
    }
    &-block {
      position: relative;
      overflow: auto;
      height: calc(100% - 40px);
      .swiper-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
      }
      .swiper-slide {
        height: 200px;
      }
    }
  }
}
</style>

注意设置高度
两个地方，设置.swiper-container和.swiper-slide的样式，
swiper-container为设置整体滚动区域，高度一定要设置
swiper-slide为设置单个的样式，高度一定要设置

注：如果您使用vue的话，建议用vue-seamless-scroll