vue中轮播图vue-awesome-swiper插件的使用

在之前的文章中我们已经学习了Vue的基本知识，对vue已经有了一个整体的认识，学习了它的环境准备，常用的方法和开发过程。轮播图在项目中还是会经常用到的，如果使用其它框架库里面都会有轮播图的组件，本篇主要学习如何单独使用轮播图插件vue-awesome-swiper。

创建项目

安装好vue-cli，使用 vue create xxx 创建一个脚手架项目。

然后 npm run serve 运行项目没有任何问题，下面就可以学习开发轮播图了。

组件介绍

vue-awesome-swiper 是一个轮播图组件，它依赖于 Swiper 库。可以使用它来完成水平，垂直不同显示样式的轮播图，详细的使用方法和示例可以参照它自己的网站和 swiper 相关网站。

npm 地址：https://www.npmjs.com/package/vue-awesome-swiper

github 地址：https://github.surmon.me/vue-awesome-swiper/

Swiper

npm 地址：https://www.npmjs.com/package/swiper

github 地址：https://github.com/nolimits4web/Swiper

Swiper 中文网： https://www.swiper.com.cn/usage/index.html

安装组件

安装 vue-awesome-swiper

最新版：

npm install vue-awesome-swiper --save

cnpm install vue-awesome-swiper --save

指定版本：

cnpm install vue-awesome-swiper@3.1.3 --save

安装 Swiper

Swiper的版本比较多，最新的版本变化比较大，支不支持还需验证，4和5的版本相对稳定。

cnpm install swiper@5.4.5 --save

注：安装最新版的 vue-awesome-swiper 后，选择安装 swiper 版本很重要，如果默认安装最新的 swiper 可能会出现意想不到的问题（此坑以尝试），最好选择稳定版本使用。

使用组件

1.页面模板

<swiper  class="swiper" :options="swiperOption"  @click-slide="handleClickSlide">
      <!-- 轮播内容 -->
      <swiper-slide
        class="swiper-slide"
        v-for="(item, index) in swiperData"
        :key="index"
      >
      <!-- 可自定义： 图片，文本，链接等 -->
        <img :src="item.image" />
      </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>
</swiper>

2.全局使用

在 main.js 导入

// 引入 vue-awesome-swiper 组件
import VueAwesomeSwiper from "vue-awesome-swiper";
// 引入 swiper 样式文件，具体位置要看 node_modules\swiper 里面的css路径
import "swiper/css/swiper.css";
// 导入 vue 中
Vue.use(VueAwesomeSwiper);

3.组件内使用

import 'swiper/css/swiper.css' ;
import { swiper, swiperSlide } from 'vue-awesome-swiper';
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}

4.页面脚本

export default {
  name: "DemoSwiper",
  data: function () {
    return {
      swiperData: [
        {
          title: "",
          image: "/images/swiper0.jpeg",
          link: "",
        },
        {
          title: "",
          image: "/images/swiper1.jpeg",
          link: "",
        },
        {
          title: "",
          image: "/images/swiper2.jpeg",
          link: "",
        },
      ],
      swiperOption: {
        // 填充适应模式
        effect: "fade",
        //显示分页
        pagination: {
          el: ".swiper-pagination",
        },
        //自动轮播
        autoplay: {
          // 轮播切换时间
          delay: 3000,
          //当用户滑动图片后继续自动轮播
          disableOnInteraction: false,
        },
        //开启循环
        loop: true,
      },
    };
  },
  methods: {
    handleClickSlide(index, reallyIndex) {
      // 轮播图点击
      console.log(
        "Click slide：index " + index + "，reallyIndex " + reallyIndex
      );
    },
  },
  mounted() {},
};

效果图

欢迎大家一起来交流，学习，提出问题，共同探讨解决方案。