vue.js+vue-awesome-swiper轮播

来源：互联网发布：ramin djawadi 知乎编辑：程序博客网时间：2024/06/11 02:07

一般做移动端轮播图的时候，最常用的就是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>

3 0