vue中引入awesomeswiper的方法以及编写轮播组件
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>
