风华正茂、时光流逝、真爱时光、努力创建辉煌。

vue-awesome-swiper 的安装和使用

 

vue-awesome-swiper 的安装和使用

安装:最好用:cnpm install vue-awesome-swiper --save。用npm太慢会卡死。

引用:

 

 /*全局引入*/
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
    Vue.use(VueAwesomeSwiper, /* { default global options } */)

 

 

  /*组件方式引用*/
    import 'swiper/dist/css/swiper.css'////这里注意具体看使用的版本是否需要引入样式,以及具体位置。
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
    components: {
      swiper,
      swiperSlide
    }

 

 

 

 <swiper :options="swiperOption">
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
    </swiper>
    <!--以下看需要添加-->
    <div class="swiper-scrollbar"></div> //滚动条
    <div class="swiper-button-next"></div> //下一项
    <div class="swiper-button-prev"></div> //上一项
    <div class="swiper-pagination"></div> //标页码

 

 

 data() {
    return {
      swiperOption: {
        notNextTick: true,
        autoplay: true,
        speed: 1000,
        loop: true
      },
    };
  },
 components: {   //
    swiper,
    swiperSlide
  },

 

 

 


 

我个人自己使用的方法:

0.1、使用的是yarn 的方式安装插件:

 

 

0.2、在需要使用的组件中引入

 

 

0.3、结构设置,

 

 

 

 

 0.4、配置项设置1

 

 

0.5、配置项设置2

 

posted @ 2019-09-12 10:33  野马,程序源改造新Bug  阅读(4045)  评论(0编辑  收藏  举报