VUE中实现轮播图——Swiper 插件应用 vue-awesome-swiper【详细步骤】

时间:2021-2-26 作者:admin

VUE中实现轮播图——Swiper vue-awesome-swiper 插件应用【详细步骤】

文章目录


前言

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端;能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。本文将从介绍什么是Swiper插件,以及Swiper插件的使用方法等方面进行讲述如何在VUE项目中实现轮播图。


一、Swiper是什么?

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端;能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

swiper是第一个第三方的库,可以用来实现移动端、pc端的滑动操作,十分方便
官方文档: https://www.swiper.com.cn/
在GitHub上参考安装和使用对策教程
网址:https://github.com/surmon-china/vue-awesome-swiper

二、使用步骤

1.安装

VUE中实现轮播图——Swiper   插件应用 vue-awesome-swiper【详细步骤】

因为老版本会比新的更加稳定, 在这里我们就安装2.6.7这个版本

npm install swiper vue-awesome-swiper@2.6.7 --save

VUE中实现轮播图——Swiper   插件应用 vue-awesome-swiper【详细步骤】

2.在VUE中引入swiper

我们要在main.js 中添加这两行代码引入swiper

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

3.在VUE中使用swiper

首先看一下我们的目录结构:
VUE中实现轮播图——Swiper   插件应用 vue-awesome-swiper【详细步骤】
在home这个文件夹下面有components文件夹,以及Home.vue这个文件。
显而易见,我们需要使用到组件间的引用,在Home.vue引用swiper.vue这个子组件。

在GitHub上参考教程是这样写的
VUE中实现轮播图——Swiper   插件应用 vue-awesome-swiper【详细步骤】
当然如果直接这样写的话,轮播的不是图片,而是数字,所以在这里我也做了一些小调整。
其实就是在<swiper-slide></swiper-slide>加一个img标签/

直接上Swiper.vue 的代码:
html部分:

<template>
<div class="wrapper">
    <swiper :options="swiperOptions">
    <swiper-slide>
        <img class="swiper-img" src="./img/1.jpg"/>
    </swiper-slide>
    <swiper-slide>
        <img class="swiper-img" src="./img/2.jpg"/>
    </swiper-slide>
    <swiper-slide>
        <img class="swiper-img" src="./img/3.jpg"/>
    </swiper-slide> 
    
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>

js部分

export default {
    name:'HomeSwiper',
    data(){
        return{
            swiperOptions:{
                pagination:'.swiper-pagination',
            }, 
        }
    }
}

当然,也别忘记我们要在Home.vue中引入
Home.vue html部分

<template>
  <div >
    <home-swiper></home-swiper>
  </div>
</template>

js部分

import HomeSwiper from './components/Swiper'
export default {
  name: 'Home',
  components :{
    HomeSwiper
  },
}

4.优化与改进:使用v-for显示轮播图

像我们一开始方法,是写死的,也不方便修改或者添加图片。我们可以使用v-for进行改进与优化。其实就是把图片的地址用一个对象数组存起来,循环加载img标签中的图片地址。

值得注意的时候,我们在存地址的时候要加上require()这个函数。
详细内容可参考:https://www.cnblogs.com/SamWeb/p/8519735.html

html部分

<div class="wrapper">
    <swiper :options="swiperOptions">
    <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl"/>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>

js部分

export default {
    name:'HomeSwiper',
    data(){
        return{
            swiperOptions:{
                pagination:'.swiper-pagination',
            },
            swiperList:[
                {
                    id:'0001',
                    imgUrl:require('./img/1.jpg'),

            },
            {
                 id:'0002',
                 imgUrl:require('./img/2.jpg'),

            },
            {
                 id:'0003',
                 imgUrl:require('./img/3.jpg'),
            }
            ],
            
        }
    }
}

好啦~恭喜你!一个可爱的轮播图就做好啦~(///▽///) ~
VUE中实现轮播图——Swiper   插件应用 vue-awesome-swiper【详细步骤】

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。