vue学习之路(二)--vue-awesome-swiper

来源:互联网 发布:医院网络拓扑结构图 编辑:程序博客网 时间:2024/06/07 20:31


安装:npm install vue-awesome-swiper --save

注册:

Main.js

import VueSwiper from 'vue-awesome-swiper';Vue.use(VueSwiper);


使用:

Header.vue

<template>
  <swiper :options="swiperOption">   //vue组件标签
    <swiper-slide><img src="./0.jpg"width="100%"> </swiper-slide>
    <swiper-slide><img src="./0.jpg"width="100%"> </swiper-slide>
    <swiper-slide><img src="./0.jpg"width="100%"> </swiper-slide>
  </swiper>
</template>

<script type="text/ecmascript-6">
  import{ swiper,swiperSlide } from'vue-awesome-swiper';

调用swiper
  require('swiper/dist/css/swiper.css');

调用 swiper.css
  export default{
    components: {  组件注册
      swiper,
      swiperSlide
    },
    data() {
      return{
        swiperOption: {   swiperOption是上面的options值
          loop:true,
          autoplay:3000,
          autoplayDisableOnInteraction:false
        
}
      };
    }
  };
</script>

 

原创粉丝点击