vue2中用swiper

一、安装swiper

npm install --save swiper

　

二、home组件　

//home.js

<app-banner :listImg="bannerList"></app-banner>

传值：bannerList为传入的数组

引入
import Banner from '../components/banner.vue'

模块化
components: {
    'app-banner': Banner
  },

　　

三、子组件

banner.js

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="str in listImg" :style="{ backgroundImage: 'url(' + str.img_url + '?imageView2/2/w/640/h/400)' }">
        <img :src="str.img_url" alt="">
      </div>
    </div>
    <div class="swiper-pagination swiper-pagination-white"></div>
  </div>
</template>

<script>
  import Swiper from 'swiper';
  //import 'swiper/dist/css/swiper.min.css';
  import '../assets/css/swiper.min.css';
  export default {
    props: ['listImg'],
    mounted() {
      console.log('mounted', this)
      var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        speed: 600,
        autoplay: 4000,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        onTouchEnd: function() {
          swiper.startAutoplay()
        }
      });
    }
  }
</script>

<style scoped>
  .swiper-container {
    width: 100%;
    height: 4rem;
  }
  .swiper-wrapper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;

  }
  .swiper-slide img{
    width: 100%;
    height: 100%;
    max-height:4rem;
  }
  .swiper-pagination-bullet {
    width:0.833rem;
    height: 0.833rem;
    display: inline-block;
    background: #7c5e53;
  }

</style>

　　

原文链接：https://segmentfault.com/a/1190000009143923

https://segmentfault.com/a/1190000002962202