码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-10-13 22:42:22      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:1.3   enter   ase   interval   val   box   ons   ESS   编写   

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的方法以及编写轮播组件

标签:1.3   enter   ase   interval   val   box   ons   ESS   编写   

原文地址:https://www.cnblogs.com/fqh123/p/9784359.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!