vue项目中如何使用使用swiper

一、在vue项目中安装swiper

	npm install swiper -S

二、在main.js中引入swiper.css

	import Vue from 'vue';
	import "swiper/swiper.min.css"

三、在需要使用swiper的组件中引入swiper ，swiper必须放到mounted里 否在无效

<script>
import Swiper from 'swiper';
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
     new Swiper ('.swiper-container', {
    loop: true,
    // 如果需要分页器
    pagination: '.swiper-pagination',
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })        
  }
}
</script>

四、在需要的 中引入html

	<div class="swiper-container">
	    <div class="swiper-wrapper">
	        <div class="swiper-slide">Slide 1</div>
	        <div class="swiper-slide">Slide 2</div>
	        <div class="swiper-slide">Slide 3</div>
	    </div>
	    <!-- 如果需要分页器 -->
	    <div class="swiper-pagination"></div>
	    
	    <!-- 如果需要导航按钮 -->
	    <div class="swiper-button-prev"></div>
	    <div class="swiper-button-next"></div>
	    
	    <!-- 如果需要滚动条 -->
	    <div class="swiper-scrollbar"></div>
	</div>

要是新版的swiper左右点击、锚点无效的话考虑下面的方案

一、安装swiper 和 vue-awesome-swiper

1、template 箭头放到轮播图内

<template>
  <div class="wrapper">
    <swiper ref="mySwiper" v-bind:options="swiperOptions">
      <swiper-slide v-for="(item, index) in 5" v-bind:key="index">
          {{item}}
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

1、1 template 箭头放到轮播图外

<template>
  <div class="wrapper">
    <swiper ref="mySwiper" v-bind:options="swiperOptions">
      <swiper-slide v-for="(item, index) in 5" v-bind:key="index">
          {{item}}
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
     <div class="swiper-button-prev swiper-button-prevsp" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-nextsp" slot="button-next"></div>
  </div>
</template>

2、引入必要的组件与css样式

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";

3、结构添加

data() {
    return {
      swiperOptions: {
        loop: true,
        speed: 2000,
        autoplay: {
          delay: 3000,

          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 修改默认点击左右箭头样式
       // navigation: {
         // nextEl: ".swiper-button-next",
          //prevEl: ".swiper-button-prev",
        //},
      },
    };
  },

4、注册子组件否在无效

components: {
    swiper,
    swiperSlide,
  }

5、修改默认样式

.swiper-container {
        background: #f00;
   }
.swiper-slide {
        height: 150px;
   }


//  若是修改默认样式，以下内容必须填写
.wrapper{
	position: relative;
}
.wrapper .swiper-button-nextsp,
.wrapper .swiper-button-prevsp {
    position: absolute;
    width: 40px;
    height: 40px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    z-index: 22222;
}
.wrapper .swiper-button-prevsp {
    background: url("~@/assets/images/index/pageleft.png") no-repeat center center;
    left: 5%;
    top: 199px;
}
.wrapper .swiper-button-prevsp::after,.teacher-swiper .swiper-button-nextsp::after{
    content: '';
}
.wrapper .swiper-button-prevsp:hover {
    background: url("~@/assets/images/index/leftCur.png") no-repeat center center;
}
.wrapper .swiper-button-nextsp {
    background: url("~@/assets/images/index/pageright.png") no-repeat center center;
    right: 5%;
    top: 199px;
}
.wrapper .swiper-button-nextsp:hover {
    background: url("~@/assets/images/index/rightCur.png") no-repeat center center;
}

6、遇到swiper动态数据渲染，loop（循环）失效的处理方法建议
6.1 方法一：服务器加载数据后，本地做缓存下，然后在加载
6.2 方法二：在template中对数据添加v-if判断，加载完成后在显示