欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-30 11:24:30
VUE中实现轮播图——Swiper vue-awesome-swiper 插件应用【详细步骤】文章目录前言一、Swiper是什么?二、使用步骤1.安装2.在VUE中引入swiper3.在VUE中使用swiper4.优化与改进:使用v-for显示轮播图前言Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端;能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。本文将从介绍什么是Sw...

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【详细步骤】

本文地址:https://blog.csdn.net/weixin_43633329/article/details/114001591

相关标签: vue js javascript