vue项目轮播图使用vue-awesome-swipe组件
注意:安装后可在package.json中查看安装的版本,有一个容易入坑的地方是swiper.css这个文件,因为版本不同,有的版本swiper.css位于node_modules下,不需要单独引入
1.命令行安装
npm install vue-awesome-swiper --save
2.在main.js中引入,一定要引入样式
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.min.css';
Vue.use(VueAwesomeSwiper);
详细代码如下,如嫌页面代码繁琐,可将部分代码放js里
页面代码:(如果不想要前后两个箭头,把div prev和next 注释掉就ok)
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>tab1</swiper-slide>
<swiper-slide>tab2</swiper-slide>
<swiper-slide>tab3</swiper-slide>
<swiper-slide>tab4</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
js代码:注意
需要轮播图自动播放时,autoplay:true
需要轮播图下面的小点时:
pagination: {
el: '.swiper-pagination',
clickable: true,
}
需要前后箭头:
prevButton:'.swiper-button-prev'
nextButton:'.swiper-button-next'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
data() {
return {
swiperOption: {
// notNextTick是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
notNextTick: true,
autoplay: true,
effect:"coverflow",
grabCursor : true,
setWrapperSize :true,
paginationType:"bullets",
pagination: {
el: '.swiper-pagination',
clickable: true,
},
paginationClickable :true,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
mousewheelControl : true,
observeParents:true
}
}
}
}
附个demo图片 ,自己写个好看点的样式就可以了