快速入门在Vue中使用滑动插件Swiper

柔情只为你懂 2023-10-18 11:57 35阅读 0赞

## 前言 ##

### swiper ###

开源、免费、强大的滑动插件。

swiper中文网

[https://www.swiper.com.cn/][https_www.swiper.com.cn]

Swiper4中文API

[https://www.swiper.com.cn/api/index.html][https_www.swiper.com.cn_api_index.html]

### Vue-Awesome-Swipwe ###

基于Swiper、适用于Vue的轮播组件，支持服务端和单页引用。

插件npm

[https://www.npmjs.com/package/vue-awesome-swiper][https_www.npmjs.com_package_vue-awesome-swiper]

在线demo

[https://surmon-china.github.io/vue-awesome-swiper/][https_surmon-china.github.io_vue-awesome-swiper]

## 效果 ##

![Image 1][]![20181128230603537.gif][]

## 场景 ##

home.vue是仿音乐播放器的主页面，在home界面引入了Swiper\_Banner.vue这个组件用来实现轮播图。

在Swiper\_Banner.vue，滚动的图片已经写死，放在assets下的img目录下。

项目目录结构

![Image 1][]![20181128230615208.jpg][]

## 实现 ##

### 1.安装vue-awesome-swiper插件 ###

项目根目录下打开命令行输入：

npm install --save vue-awesome-swiper

或者

cnpm install --save vue-awesome-swiper

![Image 1][]![2018112823093412.jpg][]

### 2.home.vue中引入Swiper\_Banner.vue组件 ###

打开home.vue

引入组件

import SwiperBanner from "../components/Swiper_Banner"

其中../表示上级目录。

注入组件

export default {
        name:"home",
        components:{
        SwiperBanner
        }
    }

引用组件

home.vue 完整代码

<template lang="html">
      <div class="">
        <TodayRecommend/>
        <NewsMusic />
        <SwiperBanner/>
      </div>
    </template>
    
    <script>
    import TodayRecommend from "../components/Today_Recommend"
    import NewsMusic from "../components/News_Music"
    import SwiperBanner from "../components/Swiper_Banner"
    export default {
        name:"home",
        components:{
        TodayRecommend,
        NewsMusic,
        SwiperBanner
        }
    }
    </script>
    
    <style lang="css">
    </style>

#### 3.在Swiper\_Banner.vue中配置轮播图 ####

打开轮播图组件Swiper\_Banner.vue

首先引入swiper以及swiper的样式文件

（局部注册：参照：[https://www.npmjs.com/package/vue-awesome-swiper][https_www.npmjs.com_package_vue-awesome-swiper]）

import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'

进行组件引入声明

components: {
        swiper,
        swiperSlide
      }

页面添加swiper组件元素

参照：

[https://www.npmjs.com/package/vue-awesome-swiper][https_www.npmjs.com_package_vue-awesome-swiper]

下的SPA:

<template>
      <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
        
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>
        <swiper-slide>I'm Slide 4</swiper-slide>
        <swiper-slide>I'm Slide 5</swiper-slide>
        <swiper-slide>I'm Slide 6</swiper-slide>
        <swiper-slide>I'm Slide 7</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>
        <div class="swiper-scrollbar"   slot="scrollbar"></div>
      </swiper>
    </template>
     
    <script>
      export default {
        name: 'carrousel',
        data() {
          return {
            swiperOption: {
              // some swiper options/callbacks
              // 所有的参数同 swiper 官方 api 参数
              // ...
            }
          }
        },
        computed: {
          swiper() {
            return this.$refs.mySwiper.swiper
          }
        },
        mounted() {
          // current swiper instance
          // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
          console.log('this is current swiper instance object', this.swiper)
          this.swiper.slideTo(3, 1000, false)
        }
      }
    </script>

这里只要分页器，别的属性不配置，

配置参数参照官方API参数：

[https://www.swiper.com.cn/api/pagination/362.html][https_www.swiper.com.cn_api_pagination_362.html]

此处为：

配置swiper组件属性

export default {
      data(){
        return{
          swiperOption:{
            pagination: {
              el: '.swiper-pagination',//swiper的分页器
            },
            autoplay:{
              delay:1000,//间隔一秒滚动一次
            }//自动滚动
          }
        }
      },

Swiper\_Banner.vue完整代码

<template lang="html">
      <div class="banner">
        <swiper :options="swiperOption">
          <swiper-slide>
            <img src="../assets/img/b1.jpg" alt="">
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/img/b2.jpg" alt="">
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/img/b3.jpg" alt="">
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
    </template>
    
    <script>
    
    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    
    export default {
      data(){
        return{
          swiperOption:{
            pagination: {
              el: '.swiper-pagination',//swiper的分页器
            },
            autoplay:{
              delay:1000,//间隔一秒滚动一次
            }//自动滚动
          }
        }
      },
      components: {
        swiper,
        swiperSlide
      }
    }
    </script>
    
    <style scoped>
    
    .banner{
      padding: 10px;
    }
    
    </style>

[https_www.swiper.com.cn]: https://www.swiper.com.cn/
[https_www.swiper.com.cn_api_index.html]: https://www.swiper.com.cn/api/index.html
[https_www.npmjs.com_package_vue-awesome-swiper]: https://www.npmjs.com/package/vue-awesome-swiper
[https_surmon-china.github.io_vue-awesome-swiper]: https://surmon-china.github.io/vue-awesome-swiper/
[Image 1]: 
[20181128230603537.gif]: https://img-blog.csdnimg.cn/20181128230603537.gif
[20181128230615208.jpg]: https://img-blog.csdnimg.cn/20181128230615208.jpg
[2018112823093412.jpg]: https://img-blog.csdnimg.cn/2018112823093412.jpg
[https_www.swiper.com.cn_api_pagination_362.html]: https://www.swiper.com.cn/api/pagination/362.html