使用vue完成移动端轮播图：vue-awesome-swiper3.x 基本使用

最新推荐文章于 2025-09-10 02:06:47 发布

原创最新推荐文章于 2025-09-10 02:06:47 发布 · 4.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #banner #vue-awesome-swiper

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用vue-awesome-swiper3.x在移动端创建轮播图。首先，讲解了vue-awesome-swiper是基于swiper且大多数swiper属性适用于此库。接着，详细阐述了安装和引入swiper的两种方法，包括全局引入和组件内引入。最后，讨论了轮播图的实现。

一、说明

vue-awesome-swiper是基于swiper的，安装不同版本的vue-awesome-swiper对应不同的swiper，所以swiper里面的属性多数能应用到vue-awesome-swiper中，也可以根据swiper文档来设置vue-awesome-swiper属性；
swiper挂网：https://www.swiper.com.cn/，本次使用的版本"vue-awesome-swiper": "^3.1.3"

二、安装

npm install vue-awesome-swiper@3.1.3 --save//指定安装版本
npm install vue-awesome-swiper --save // 默认安装最新的

三、引入

引入有两种方式

1.在main.js文件中全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

2.在组件中引入

import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
export default {
	name: "swiper",
    components:{
    	swiper,
        swiperSlide
   }

四、轮播图

<template>
	<div>
		<section class="swiper">
			<swiper :options="swiperOption">
				<swiper-slide  class="swp-silde" v-for="(item, index) in swiperList" :key="index" data-id="item.id">
				<img class="swp-img" :src="item.imgUrl" alt=""></swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</section>
	</div>
</template>	

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
   name: "Swiper",
   components: {
     swiper,
     swiperSlide,
   },
   data(){
      return {
          swiperOption: {
            pagination: { el: '.swiper-pagination' },
            autoplay: {},
          },
          swiperList: [{
            "id": "0001",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1708/7c/c0b9acba07764302.jpg_750x200_389436b7.jpg"
          }, {
            "id": "0002",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1805/13/6332699c44387902.jpg_750x200_b7afa4f8.jpg"
          }, {
            "id": "0003",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1805/3b/ef86879aa50e3002.jpg_750x200_2a108508.jpg"
          }, {
            "id": "0004",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1806/c1/a8a7d6b08a69c002.jpg_750x200_59bdc9ae.jpg"
          }, {
            "id": "0005",
            "imgUrl": "http://img1.qunarzz.com/piao/fusion/1806/5a/a7fc8e091190d602.jpg_750x200_e3aae50d.jpg"
          }],
      }
   }
},
created(){
   //只有一张图片时不轮播
   this.swiperOption.autoplay = this.swiperList.length != 1 ? {
   		disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
   		delay: 3000, // 自动切换的时间间隔（单位ms）
   } : false
},
</script>