swiper在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>

View Code

index父组件引用

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

derection设置swiper滚动方向

标签：..,img,px2rem,height,案例,vue2,jt,swiper
来源： https://www.cnblogs.com/yflbk-2016/p/16194059.html