一：简介
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 {
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() {
// // 这里有个坑
// 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() {
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 {
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>
`,
// 每次更新都会执行该代码，会耗费资源
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 {
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() {
// 每次更新都会执行该代码，会耗费资源
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>