vue中引入awesomeswiper的方法以及编写轮播组件

vue

1、先安装less-loader

npm install less less-loader --save

2、再安装css-loader

npm install css-loader --save

3、安装上面两个之后、再安装vue-awesome-swiper(必须在前两个安装过之后安装)

npm install vue-awesome-swiper --save

4、安装完之后在package.json文件中查看一下,看是否安装上,如果安装成功,里面会显示对应的版本号

"less": "^3.8.1",

"less-loader": "^4.1.0",

"css-loader": "^0.28.11",

"vue-awesome-swiper": "^3.1.3",

5、在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

6、修改build\webpack.base.conf.js文件,添加下面代码

  {

        test: /\.less$/,

        loader: 'style-loader!css-loader!less-loader'

  }

7、之后就可以编写轮播组件什么的。。。送佛送到西,(轮播)组件附上:

<template>

    <div class="swiperBox">

           <swiper :options="swiperOption" ref="mySwiper">

                   <!-- 这部分放置需要渲染的内容 -->

                   <swiper-slide><div class="page">1</div></swiper-slide>

                   <swiper-slide><div class="page">2</div></swiper-slide>

                   <swiper-slide><div class="page">3</div></swiper-slide>

                   <swiper-slide><div class="page">4</div></swiper-slide>

                   <div class="swiper-pagination" slot="pagination"></div>

           </swiper>

     </div>

</template>

 

 

<script>

  import { swiper,swiperSlide } from 'vue-awesome-swiper'

  export default{

    components:{

      swiper,

      swiperSlide

    },

    data(){

      return {

        swiperOption:{

        notNextTick:true,

        pagination:{

          el:'.swiper-pagination'

        },

        loop:true,

        disableOnInteraction:true,

        autoplay:2000,

        slidesPerView:'auto',

        centeredSlides:true,

        paginationClickable:true,

        spaceBetween:30,

        onSlideChangeEnd:swiper => {

          //这个位置放置swiper的回调方法

          this.page = swiper.realIndex+1;

          this.index = swiper.realIndex;

        }

      }

    }

  },

  computed:{

    //定义这个swiper对象

    swiper(){

      return this.$refs.mySwiper.swiper;

    }

  },

  mounted() {

    //这边就可以使用swiper这个对象或使用swiper官网中的方法

    var that=this;

    this.swiper.slideTo(0,0,false);

    //自动播放

    setInterval(function(){

      that.swiper.slideNext()

    },2000)

  },

}

</script>

 

<style scoped>

  .swiperBox{

    width:100%;

    height:300px;

  }

  .page{

    width:100%;

    height:300px;

    background:pink;

  }

</style>

以上是 vue中引入awesomeswiper的方法以及编写轮播组件 的全部内容, 来源链接: utcz.com/z/379364.html

回到顶部