一：介绍
1 简介
- Swiper 常用于移动端网站的内容触摸滑动
- Swiper 是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
- Swiper 能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
- Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
2 官网
https://www.swiper.com.cn/
3 CDN
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.cjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.esm.browser.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.esm.browser.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.esm.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.cjs.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.4.1/swiper-bundle.min.js"></script>
二：实例
1 基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<style>
.swiper-container {
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<div id="box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in dataList"><h1 style="text-align: center">{{data}}</h1></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
dataList: []
},
mounted() { // 挂载成功之后，进行DOM渲染操作。
// // 这里有个坑
// let _this = this
// setTimeout(function () {
// // 这里的this指的是这个function函数
// // this.dataList = ['11111', '22222', '33333']
// _this.dataList = ['11111', '22222', '33333']
// }, 3000)
setTimeout(() => { // 使用箭头函数之后，this指代的是上一层
this.dataList = ['11111', '22222', '33333']
}, 3000)
},
updated() { // 当数据发生改变，虚拟DOM重新渲染，进行节点的数据替换。该操作完成之后执行的钩子。
let mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
}
})
</script>
</html>
2 制作成组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<style>
.swiper-container {
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<div id="box">
<swipper>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in dataList1"><h1 style="text-align: center">{{data}}</h1></div>
</div>
</swipper>
<swipper>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in dataList2"><h1 style="text-align: center">{{data}}</h1></div>
</div>
</swipper>
</div>
</body>
<script>
Vue.component('swipper', {
template: `
<div>
<div class="swiper-container">
<slot></slot>
<div class="swiper-pagination"></div>
</div>
</div>
`, // <slot> 为插槽
// 每次只要有数据更新都会执行该代码，会耗费资源。而我们需求是只需要该部件的数据更新再执行。
// 代表可更新
// 在mouted中，执行函数是异步的，所以在加载数据的时候有了IO，就会先加载swiper，这时swiper没有了数据显示，所以需要把组件放在updated，这样保证了加载组件之前数据已经加载好了。
updated() {
let mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
}
})
let vm = new Vue({
el: '#box',
data: {
dataList1: [],
dataList2: []
},
mounted() {
setTimeout(() => {
this.dataList1 = ['11111', '22222', '33333']
this.dataList2 = ['66666', '77777', '88888']
}, 3000)
},
})
</script>
</html>
3 自定义组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<style>
.swiper-container {
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<div id="box">
<swipper>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in dataList1"><h1 style="text-align: center">{{data}}</h1></div>
</div>
</swipper>
<swipper :key="dataList2.length">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in dataList2"><h1 style="text-align: center">{{data}}</h1></div>
</div>
</swipper>
</div>
</body>
<script>
Vue.component('swipper', {
template: `
<div>
<div class="swiper-container">
<slot></slot>
<div class="swiper-pagination"></div>
</div>
</div>
`,
mounted() {
// 挂载之后DOM操作渲染的Swiper，所以相当于写死，不能进行更新操作。
let mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
}
})
let vm = new Vue({
el: '#box',
data: {
dataList1: [],
dataList2: []
},
mounted() {
setTimeout(() => {
this.dataList1 = ['11111', '22222', '33333']
this.dataList2 = ['66666', '77777', '88888']
}, 3000)
},
})
</script>
</html>