swiper7在vue2中使用-案例篇

案例

1.图片左右滚动

上图

       

 

效果描述

 

 第一行向左滚动

第二行向右滚动

代码

ScrollImg组件

<template>
  <swiper :options="swiperOption"
          :dir="derection"
          class="companySP__srollImg">
    <swiper-slide class="companySP__srollImg__item"
                  v-for="(item,index) of data"
                  :key="index">
      <img :src="item.img"
           alt="">
    </swiper-slide>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import Swiper2, { Autoplay } from 'swiper'
import 'swiper/swiper-bundle.css'

Swiper2.use([Autoplay])
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
    derection: {
      type: String,
      defualt: 'ltr'
    }
  },
  data () {
    return {
      data: [
        { img: require('../../assets/img/jt_pp1.png') },
        { img: require('../../assets/img/jt_pp2.png') },
        { img: require('../../assets/img/jt_pp3.png') },
        { img: require('../../assets/img/jt_pp1.png') }
      ]
    }
  },
  computed: {
    swiperOption () {
      return {
        speed: 2000, // 切换速度
        // 设定初始化时slide的索引
        initialSlide: 0,
        // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
        direction: 'horizontal',
        // 修改swiper自己或子元素时，自动初始化swiper
        observer: true,
        // 修改swiper的父元素时，自动初始化swiper
        observeParents: true,
        // 自动切换图配置
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 环状轮播
        loop: true,
        slidesPerView: 2, // 一个屏幕展示的数量
        spaceBetween: 15
      }
    }
  }

}
</script>

<style lang="scss">
.companySP__srollImg {
  position: relative;
  height: 100%;
  width: 96%;
  margin-left: 2%;
  overflow: hidden;
  & > div:first-child {
    // 解决水平滚动不生效的bug
    display: flex !important;
  }
  &__item {
    font-size: px2rem(16);
    color: #fff;
    // width: px2rem(324) !important;
    height: px2rem(99);
    line-height: px2rem(99);
    background: #08203e;
    // margin-right: px2rem(10);
    text-align: center;
    & > img {
      height: 100%;
      width: 100%;
    }
  }
}
</style>

index父组件引用

 <scroll-img derection="ltr" />
 <scroll-img derection="rtl" />

derection设置swiper滚动方向

 

2.自下往上滚动table

   

<template>
  <swiper :options="swiperOption"
          class="companySP__srollTable">
    <swiper-slide class="companySP__srollTable__item"
                  v-for="(item,index) of tableData"
                  :key="index">
      <td>{{item.name}}</td>
      <td>{{item.value}}</td>
      <td>{{item.time}}</td>
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import Swiper2, { Autoplay } from 'swiper'
import 'swiper/swiper-bundle.css'

Swiper2.use([Autoplay])
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
    tableData1: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      tableData: [
        { name: '成都公司1', value: '100吨', time: '2021-12-5 12:00:00' },
        { name: '成都公司2', value: '100吨', time: '2021-12-5 12:00:00' },
        { name: '成都公司3', value: '100吨', time: '2021-12-5 12:00:00' },
        { name: '成都公司4', value: '100吨', time: '2021-12-5 12:00:00' },
        { name: '成都公司5', value: '100吨', time: '2021-12-5 12:00:00' },
        { name: '成都公司6', value: '100吨', time: '2021-12-5 12:00:00' },
        { name: '成都公司7', value: '100吨', time: '2021-12-5 12:00:00' },
        { name: '成都公司8', value: '100吨', time: '2021-12-5 12:00:00' },
        { name: '成都公司9', value: '100吨', time: '2021-12-5 12:00:00' }
      ],
      swiperOption: {
        speed: 2000, // 切换速度
        // 设定初始化时slide的索引
        initialSlide: 0,
        // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
        direction: 'vertical',
        // 修改swiper自己或子元素时，自动初始化swiper
        observer: true,
        // 修改swiper的父元素时，自动初始化swiper
        observeParents: true,
        // 自动切换图配置
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 环状轮播
        loop: true,
        slidesPerView: 6, // 一个屏幕展示的数量
        spaceBetween: 3
        // loopedSlides: 1
      }
    }
  }

}
</script>

<style lang="scss">
.companySP__srollTable {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  &__item {
    font-size: px2rem(12);
    color: #e6f7ff;
    // height: px2rem(28);
    // line-height: px2rem(40);
    background: rgba(1, 130, 255, 0.1);
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    td {
      // text-align: left;
      display: table-cell;
      padding: 0 px2rem(4);
      &:nth-child(3) {
        color: #5a83a3;
        width: px2rem(70);
      }
      &:nth-child(2) {
        flex: 1;
      }
      &:nth-child(1) {
        width: px2rem(60);
      }
    }
    &:nth-child(odd) {
      background: rgba(1, 130, 255, 0.2);
    }
  }
}
</style>

        

 

 3. 轮播效果

效果演示一下（尽力了）

             

 

代码

<template>
  <!-- navigation -->
  <swiper :options="swiperOption"
          :pagination="{ clickable: true }"
          class="companySL__srollImg">
    <swiper-slide class="companySL__srollImg__item"
                  v-for="(item,index) of data"
                  :key="index">
      <img :src="item.img"
           alt="">
    </swiper-slide>
    <div class="swiper-pagination"
         id="myPagn"

  </swiper>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import Swiper2, { Autoplay, Pagination, EffectCoverflow } from 'swiper'
import 'swiper/swiper-bundle.css'

Swiper2.use([Autoplay, Pagination, EffectCoverflow])
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      data: [
        { img: require('../../assets/img/slPage/cp1.png') },
        { img: require('../../assets/img/slPage/cp2.png') },
        { img: require('../../assets/img/slPage/cp3.png') },
        { img: require('../../assets/img/slPage/cp4.png') },
        { img: require('../../assets/img/slPage/cp5.png') }
      ],
      swiperOption: {
        speed: 5000, // 切换速度
        // 设定初始化时slide的索引
        initialSlide: 0,
        spaceBetween: 15, // 间隙
        // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
        direction: 'horizontal',
        // 修改swiper自己或子元素时，自动初始化swiper
        observer: true,
        // 修改swiper的父元素时，自动初始化swiper
        observeParents: true,
        // 自动切换图配置
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 环状轮播
        loop: true,
        slidesPerView: 1.3,
        centeredSlides: true,
        effect: 'coverflow', // 要写
        // grabCursor: true, // 小手
        coverflowEffect: {
          rotate: 0, // 30 有3D效果
          stretch: 0,
          depth: 60, // slide的位置深度
          modifier: 13,
          slideShadows: true
        },
        // pagination: true,
        // 显示分页
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          '--swiper-theme-color': 'yellow',
          clickable: true // 允许分页点击跳转
        }
      }
    }
  },
  methods: {
    // onSwiper (swiper) {
    //   console.log(swiper)
    // }
  }
}
</script>

<style lang="scss">
.companySL__srollImg {
  position: relative;
  height: 100%;
  width: 96%;
  margin-left: 2%;
  overflow: hidden;
  & > div:first-child {
    // 解决水平滚动不生效的bug
    display: flex !important;
  }
  &__item {
    font-size: px2rem(16);
    height: px2rem(222);
    // line-height: px2rem(222);
    color: #fff;
    background: #132b4a;
    border: px2rem(1) solid #3f9dff;
    border-radius: px2rem(8);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    & > img {
      height: px2rem(212);
      width: px2rem(182);
    }
    & > div {
      box-sizing: border-box;
      width: px2rem(136);
      margin-left: px2rem(15);
      // height: 100%;
      word-wrap: break-word;
      word-break: break-all;
      span {
        color: #ffffff;
        font-size: px2rem(14);
        font-weight: 700;
        display: inline-block;
        line-height: px2rem(50);
      }
      div {
        text-align: left;
      }
    }
  }

  #myPagn,
  .swiper-pagination {
    & > .swiper-pagination-bullet {
      background: rgba(63, 157, 255, 0.6) !important;
    }
    & > .swiper-pagination-bullet-active {
      background: rgba(63, 157, 255, 1) !important;
    }
  }
}
</style>