vue-awesome-swiper实现轮播图片

ccf19881030

发布于 2020-03-03 10:43:35

5.2K0

发布于 2020-03-03 10:43:35

文章被收录于专栏：ccf19881030的博客

前言

最近在学习Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台时，学习到第三章 3.7-首页顶部轮播图片（vue-swipper）时，学习了vue-awesome-swiper这个库的使用，其npm官网地址是：https://www.npmjs.com/package/vue-awesome-swiper，对应的github项目地址是:https://github.com/surmon-china/vue-awesome-swiper 其官网介绍如下所示：

Swiper的相关简介

Swiper中文网地址为：https://www.swiper.com.cn。 Swiper目前已经更新到版本5了，Swiper常用于移动端网站的内容触摸滑动，Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！简单配置即可实现手机、电脑网页大部分滑动功能，焦点图、tab、触摸导航等。其官网对于Swipper5的介绍如下：

vue-awesome-swiper的使用

我使用的操作系统是Windows10,使用的开发IDE是Visual Studio Code，参考npmjs-vue-awesome-swiper上面的使用说明，其使用起来很简单，在学习全栈之巅的王者荣耀项目的3.7-首页顶部轮播图片（vue-swipper）时，学习如何使用vue-awesome-swiper加载轮播图片。

使用步骤

1、npm安装vue-awesome-swiper

npm install vue-awesome-swiper --save

2、Mount

mount with global

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// require styles
import 'swiper/dist/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default global options } */)

根据官网文档描述，即全局导入，我在做这个项目时，是在main.js中引入该组件的，对应的main.js文件内容如下所示：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import './style.scss'
import router from './router'

// 使用vue-awesome-swiper轮播组件  https://github.com/surmon-china/vue-awesome-swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

3、在需要使用轮播效果的Vue页面中使用swiper组件，如下所示：

<!-- The ref attr used to find the swiper instance -->
<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <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>
    <!-- Optional controls -->
    <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>

我在做项目时，是在Home.vue中使用该组件的，加了3中图片链接用于实现轮播效果，具体的Home.vue代码如下：

<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>
        <img class="w-100" src="../assets/images/8def83c86d3df7e177faa78bf322bf65.jpeg">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/01378523eb7c4e073a18acd56f0f1777.jpeg">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/e38db707a96d8458101c78ecf644e467.jpeg">
      </swiper-slide>
    
      <div class="swiper-pagination" slot="pagination">
      </div>
    </swiper>
  </div>
</template>

<script>

export default {
    data() {
      return {
        swiperOption: {
          autoplay: { delay: 3000},   // 每隔3秒钟轮播另外一张图片
          pagination: {
              el: '.swiper-pagination'
          }
      }
    }
  }
  }
</script>

<style>

</style>

我在项目中暂时只放了3张用于轮播的图片，每隔3秒钟轮播另外一张图片，当在浏览器中左右滑动鼠标或者在手机端左右滑动时会看到不同的图片，起来轮播的效果最终的轮播效果图如下所示：图片1：