vue安装使用swiper

安装swiper3版本

npm install swiper@3 --save-dev
1

卸载swiper

npm uninstall swiper
1

需要的页面引入或者main.js引入

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
1
2

html

<div class="swiper-container">
	<div class="swiper-wrapper">
		<!-- 这里的数据需要使用自己定义的数组或者从后端返回的数组 -->
		<div class="swiper-slide" v-for="item in dataList" :key="item.id"></div>
	</div>
	 <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

methods

//初始化轮播
initSwiper(){
	 new Swiper('.swiper-container', {
	    loop: true,
		direction: 'vertical',//垂直
		slidesPerView: 4,//显示4个
		speed: 2000,//速度
	    autoplay: 1000,
		autoplayDelay: 200,
	    autoplayDisableOnInteraction: false,
	    observer:true,//修改swiper自己或子元素时，自动初始化swiper
	    observeParents:true,//修改swiper的父元素时，自动初始化swiper
	    // 如果需要分页器
        pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // 如果需要滚动条
        // scrollbar: '.swiper-scrollbar',
	})
},
//获取数据列表
getDataList() {
	this.$http({
		url: this.$http.adornUrl('personalTask/getPersonalHomeNum'),
		method: "get",
		params: {
			userId: this.currentUserId,//当前登陆者id
		}
	}).then(res => {
		this.dataList = res.data
		//等待数据渲染成功后再初始化轮播
		var _this = this
		_this.$nextTick(() => {
			setTimeout(()=>{
		 	   this.initSwiper()//防止第一张图闪过
		 	},500)
		 })
	}).catch(err => {
		console.log(err)
	});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42