vue+swiper实现轮播效果 一个页面放多个轮播

---

多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)

---

       vue页面实现用swiper的轮播，话不多说，直接开始贴代码：

              一 、首先要先安装swiper插件：

                       npm install swiper --save-dev （安装淘宝镜像的也可以cnpm更快一点）

              二 、main.js引入swiper样式

                        import 'swiper/dist/css/swiper.css';

              三 、再页面中引入swiper

                       <script>

                              import Swiper from "swiper";

                       </script>

               到此已经可以开始直接使用了

html：

<template>
    <div class="hello">
        <div class="swiper-container" @mouseenter="comtainer_enter" @mouseleave="comtainer_leave"><!-- 这边的两个方法是鼠标移入和移出 -->
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in arr" :key="index">
                    <img :src="item.img_url" alt="">
                </div>
            </div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <!-- 指示点 -->
            <div class="swiper-pagination"></div><!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
        </div>
    </div>
</template>

js: 

<script>

import Swiper from "swiper";//引入swiper
import { setTimeout } from 'timers';
export default {
    name: "HelloWorld",
    data() {
        return {
            swiper:'',
            index:'',
            arr:[
                {img_url:require('@/assets/a.png')},
                {img_url:require('@/assets/b.png')},
                {img_url:require('@/assets/c.png')},
                {img_url:require('@/assets/d.png')},
                {img_url:require('@/assets/e.png')}
            ]
        };
    },
    mounted() {
        this.swiper = new Swiper(".swiper-container", {
            autoplay: {//自动轮播
                disableOnInteraction: false,//当设置为false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay。
            },
            pagination: {//指示点
                el: '.swiper-pagination',
            },
            grabCursor : true,//鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
            loop: true,
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    },
};
</script>

注：柚子找了半天也没有找到有直接鼠标悬停的方法的，所以只好手写了一个，大家可以看一下，也可能是我看的少，如果有哪位大佬有更好的方法的话，欢迎来交流，谢谢！！！如果需要鼠标移入的时候做一些操作，比如鼠标移入需要暂停轮播，移出之后继续轮播的就需要在js里的methods里面写上下面的两个方法，方法在上面html里面已经定义过了，如果不需要可以删掉：

    methods:{
        /*鼠标移入停止轮播,5秒后继续轮播，鼠标离开 继续轮播*/
        comtainer_enter(){
            this.swiper.autoplay.stop();
            setTimeout(this.comtainer_leave,2000 );//两秒加上默认的三秒
        },
        comtainer_leave () {
            this.swiper.autoplay.start();
        }
    }

style：

<style scoped>
    .swiper-container {
        width: 500px;
        height: 300px;
        margin: 20px auto;
    }
</style>

上面的是页面中有单个轮播的，如果需要多个轮播的话，只需要定义不通的类就可以了，下面直接贴出全部的代码：

<template>
  <div class="hello">
    <!-- 第一个轮播 -->
    <div
      class="banner1 swiper-container"
      @mouseenter="comtainer_enter1"
      @mouseleave="comtainer_leave1"
    >
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in arr1" :key="index">
          <!-- <img src="../assets/logo.png" alt=""> -->
          <img :src="item.img_url" alt>
        </div>
      </div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <!-- 指示点 -->
      <div class="swiper-pagination"></div>
      <!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
    </div>

    <!-- 第二个轮播 -->
    <div
      class="banner2 swiper-container"
      @mouseenter="comtainer_enter2"
      @mouseleave="comtainer_leave2"
    >
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in arr2" :key="index">
          <!-- <img src="../assets/logo.png" alt=""> -->
          <img :src="item.img_url" alt>
        </div>
      </div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <!-- 指示点 -->
      <div class="swiper-pagination"></div>
      <!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import { setTimeout } from "timers";
export default {
  name: "HelloWorld",
  data() {
    return {
      swiper1: "",
      swiper2: "",
      arr1: [
        { img_url: require("@/assets/a.png") },
        { img_url: require("@/assets/b.png") },
        { img_url: require("@/assets/c.png") },
        { img_url: require("@/assets/d.png") },
        { img_url: require("@/assets/e.png") }
      ],
      arr2: [
        { img_url: require("@/assets/a.png") },
        { img_url: require("@/assets/b.png") },
        { img_url: require("@/assets/c.png") },
        { img_url: require("@/assets/d.png") },
        { img_url: require("@/assets/e.png") }
      ]
    };
  },
  mounted() {
    this.swiper1 = new Swiper(".banner1", {
      autoplay: {
        //自动轮播
        disableOnInteraction: false //当设置为false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay。
      },
      pagination: {
        //指示点
        el: ".swiper-pagination",
        clickable :true //为true时点击指示点会切换slide
      },
      grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
      loop: true,
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });

    this.swiper2 = new Swiper(".banner2", {
      autoplay: {
        //自动轮播
        disableOnInteraction: false //当设置为false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay。
      },
      pagination: {
        //指示点
        el: ".swiper-pagination",
        clickable :true //为true时点击指示点会切换slide
      },
      grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
      loop: true,
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  },
  methods: {
    /*鼠标移入停止轮播,5秒后继续轮播，鼠标离开 继续轮播*/
    comtainer_enter1() {
      this.swiper1.autoplay.stop();
      setTimeout(this.comtainer_leave1, 2000); //两秒加上默认的三秒
    },
    comtainer_leave1() {
      this.swiper1.autoplay.start();
    },
    comtainer_enter2() {
      this.swiper2.autoplay.stop();
      setTimeout(this.comtainer_leave2, 2000); //两秒加上默认的三秒
    },
    comtainer_leave2() {
      this.swiper2.autoplay.start();
    }
  }
};
</script>
<style scoped>
.swiper-container {
  width: 500px;
  height: 300px;
  margin: 20px auto;
}
</style>

swiper中文网：  https://www.swiper.com.cn/      还有需要的朋友可以多看一下api文档

ok，到此结束，就是这么简单，希望能帮助一些朋友。