vue轮播插件vue-awesome-swiper-来自于三人行慕课

最新推荐文章于 2023-12-02 11:16:32 发布

易驰教育

最新推荐文章于 2023-12-02 11:16:32 发布

阅读量188

点赞数

分类专栏：视频教程文章标签： vue

视频教程专栏收录该内容

37 篇文章

订阅专栏

本文介绍了vue轮播插件vue-awesome-swiper的使用。包括通过npm安装插件，以及在main.js和单独组件中引入插件的方式，还提及了在template中使用时的data配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接：https://www.3mooc.com/front/articleinfo/160
vue轮播插件vue-awesome-swiper-来自于三人行慕课

npm安装插件

npm install vue-awesome-swiper -S

引入插件

a>main.js中

import Vue from ‘vue’

import vueSwiper from ‘vue-awesome-swiper’

import ‘swiper/dist/css/swiper.css’

Vue.use(vueSwiper);

b>单独的组件引入

import { swiper, swiperSlide } from “vue-awesome-swiper”;

import “swiper/dist/css/swiper.css”;

components: {

swiper,

swiperSlide

}

template中使用

<img :src="item.image" alt="" />

{{imgIndex}}/{{detailimages.length}}

data配置

data() {

const that = this;

return {

  imgIndex: 1,

  swiperOption: {

    //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true

    notNextTick: true,

    //循环

    loop: true,

    //设定初始化时slide的索引

    initialSlide: 0,

    //自动播放

    autoplay: {

      delay: 1500,

      stopOnLastSlide: false,

      /* 触摸滑动后是否继续轮播 */

      disableOnInteraction: false

    },

    //滑动速度

    speed: 800,

    //滑动方向

    direction: "horizontal",

    //小手掌抓取滑动

    grabCursor: true,

    on: {

      //滑动之后回调函数

      slideChangeTransitionStart: function() {

        /* realIndex为滚动到当前的slide索引值 */

        that.imgIndex= this.realIndex - 1;

      },

    },

    //分页器设置

    pagination: {

      el: ".swiper-pagination",

      clickable: true,

      type: "bullets"

    }

  }

};