基于vue.js轮播组件vue-awesome-swiper怎么实现轮播图

基于vue.js轮播组件vue-awesome-swiper怎么实现轮播图

本篇内容介绍了“基于vue.js轮播组件vue-awesome-swiper怎么实现轮播图”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper相似。

1.安装vie-awesome-swiper

nam install vue-awesome-swiper --save-dev

2.引用vie-awesome-swiper组件，这里我是用vie-cli创建的项目,在main.js：

import VueAwesomeSwiper from 'vue-awesome-swiper';  Vue.use(VueAwesomeSwiper) //记得不要忘记这句

3.Home.vue下使用

<template>  <div>  <swiper :options="swiperOption" ref="mySwiperA">    <!-- 幻灯内容 -->    <swiper-slide>slide1</swiper-slide>    <swiper-slide>slide2</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>    <div class="swiper-scrollbar"  slot="scrollbar"></div>  </swiper>  </div>  </template>  <script>    export default{      data(){        return {          swiperOption: {            // 所有配置均为可选（同Swiper配置）             notNextTick: true,            autoplay: 3000,            grabCursor : true,            setWrapperSize :true,            autoHeight: true,            pagination : '.swiper-pagination',            paginationClickable :true,            prevButton:'.swiper-button-prev',            nextButton:'.swiper-button-next',            scrollbar:'.swiper-scrollbar',            mousewheelControl : true,            observeParents:true,            onTransitionStart(swiper){             console.log(swiper)            }        }      }    },    computed: {      swiper() {       return this.$refs.mySwiperA.swiper      }    },    mounted() {      console.log("每次切换都会触发我");      this.swiper.slideTo(3, 1000, false)     }  }  </script>

“基于vue.js轮播组件vue-awesome-swiper怎么实现轮播图”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注高防服务器网网站，小编将为大家输出更多高质量的实用文章！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[