Vue+Swiper

最新推荐文章于 2025-05-31 20:13:02 发布

原创最新推荐文章于 2025-05-31 20:13:02 发布 · 748 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

23 篇文章

订阅专栏

需要准备的东西:

1.swiper的css和js文件（swiper官网自行下载）

2.cmd中先在文件夹目录下npm install --save swiper

一、把准备好的swiper文件放在的static下。如图：

二、在src文件夹下components文件下建立swiper.vue（名字可以随便起）

在我们刚刚建立的swiper.vue文件中写入信息

template中对应 swiper官网中html,如图（Slide1,Slide2,Slide3换成图片）

在script中先把我们准备好的swiper的css和js文件引入进来

然后将他导出，从var mySwiper开始为swiper官网中内容

<script>
    import '../../../static/swiper/swiper-3.4.2.min.css'
    import Swiper from '../../../static/swiper/swiper-3.4.2.min.js';
    export default{
        name:"aaa",
        comments:{Swiper},
        mounted(){
            this.$nextTick(() =>{
                  var mySwiper = new Swiper ('.swiper-container', {
                    // direction: 'vertical',
                    loop: true,
                    autoplay:1000,
                    
                    // 如果需要分页器
                    pagination: '.swiper-pagination',
                    
                    // 如果需要前进后退按钮
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    
                    // 如果需要滚动条
                    // scrollbar: '.swiper-scrollbar',
                    
                    // 以下看个人需要加或者不加
                    autoplayDisableOnInteraction : false,   //触碰，拖动，点击后继续轮播
                    paginationClickable :true,  //关联点
                    
                })  
                // 以下看个人需要加或者不加,效果为鼠标经过轮播停止,划出继续
                $('.swiper-container').mouseover(function(){
                    mySwiper.stopAutoplay();
                })
                $('.swiper-container').mouseout(function(){
                    mySwiper.startAutoplay();
                })
            })
        }
    }
</script>

style中设置scoped(仅用于本页面)和你所需轮播图的大小

<style scoped>
    .swiper-container {
        width: 790px;
        height: 340px;
    }
</style>

在components中建立index.vue（名字随便起）用来展示轮播图

在刚在建立index.vue的文件夹中的script中引入swiper

<script>
    import swiper from "./swiper"
    export default{
        components:{
            swiper
        }
    }
</script>

template中

<template>
  <div id="aaa">
      <swiper/>
  </div>
</template>

三（此部分也可以在Vue项目步骤中查看）

src文件夹下的App.vue中：

script中:

把他自带的注释掉（或者删掉）

引入刚才我们建立的index.vue文件并导出

template中引用模块

把他id为app中自带的注释掉（或者删掉）

<template>
  <div id="app">
    <index/>
  </div>
</template>

<script>
import index from "./components/index"
  export default {
    name: 'app',
    components:{
      index
    }
  }
</script>

src下main.js中把路由链接的两句话注释掉

import routerfrom'./router' 和 new Vue下的router,这两句话需要注释

运行项目就可以看到效果啦