vue中swiper的应用

1. 安装swiper

npm i swiper@3.4.2 -S

2.引入

  mounted () {
    // this.$nextTick(() => {
    var mySwiper = new Swiper('.swiper-container', {
      loop: true,
      // 如果需要前进后退按钮
      observer: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
    })
    // })
    mySwiper()
  }

3.html

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div
          v-for="(item,index) of data2"
          :key="index"
          class="videosShow">
          <div class="videoShow">
            <iframe
              :src="item.cameraLocation"
              name="monitorIframe"
              allow="accelerometer;autoplay; fullscreen;encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
              scrolling="no"
              alt="视频监控画面"
              frameborder="0"
              style="position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;"/>

          </div>
          <div class="tip">
            <p>视频点名称</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"/>
    <div class="swiper-button-next"/>

  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
  data: function () {
    return {
      data2: [
        {
          id: 1,
          cameraName: '视频点一(视频探头名称)',
          cameraLocation: 'https://view.2amok.com/20191214/6159ad21700640c8e6702e10ec9c1e4d.mp4',
          cameraPostion: '3F_0311 ',
          cameraStatus: '在线'
        },
        {
          id: 2,
          cameraName: '视频点二(视频探头名称)',
          cameraLocation: 'https://view.2amok.com/2019926/080a2e0299b382bdacad10967179f501.mp4',
          cameraPostion: '3F_0311 ',
          cameraStatus: '在线'
        },
        {
          id: 3,
          cameraName: '视频点三(视频探头名称)',
          cameraLocation: 'https://view.2amok.com/20191214/6159ad21700640c8e6702e10ec9c1e4d.mp4',
          cameraPostion: '3F_0311 ',
          cameraStatus: '在线'
        },
        {
          id: 4,
          cameraName: '视频点四(视频探头名称)',
          cameraLocation: 'https://view.2amok.com/2019926/080a2e0299b382bdacad10967179f501.mp4',
          cameraPostion: '3F_0311 ',
          cameraStatus: '在线'
        }
      ]
    }
  },
  mounted () {
    // this.$nextTick(() => {
    var mySwiper = new Swiper('.swiper-container', {
      loop: true,
      // 如果需要前进后退按钮
      observer: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
    })
    // })
    mySwiper()
  }
}
</script>

<style lang="less" scoped>
.swiper-container {
  width: 5.4rem;
  height: 4.5rem;
  border: 1px solid red;
  position: relative;
  .swiper-wrapper{
      // margin-top: .4rem;
    margin-top: .1rem;
      .swiper-slide{
      display: flex;
        //  flex: 1;
      overflow: hidden;
      justify-content:space-around;
      flex-wrap: wrap;
      align-items: center;
        .videosShow{
          width: 2.4rem;
          height: 2rem;
          display: flex;
          flex-direction: column;
          // justify-content: space-between;
          // align-items: flex-start;
          .videoShow{
          padding: 56.25% 0 0 0 ;
          position:relative;
          // flex: 6;
          overflow: hidden;
          border: 1px solid rgba(31, 121, 251, 1);
          width: 2.4rem;
          height: 1.52rem;

          // display: inline-block;
          video{
            width: 100%;
            height: 100%;
          }
          }
          .tip{
              height: 30px;
              width: 100%;
              font-size: 0.16rem;
              font-family: PingFang SC;
              font-weight: 300;
              color: #ffffff;
              line-height: 0.3rem;
              text-align: center;
              border: 1px solid rgba(31, 121, 251, 1);
          }
        }
      }

  }
}
</style>