(1) 本節(jié)知識(shí)點(diǎn)
- 觸摸距離與slide滑動(dòng)距離比率: touchRatio 設(shè)置的越小越難滑動(dòng)
- 無(wú)法拖動(dòng) : onlyExternal 設(shè)置為true就無(wú)法滑動(dòng)
- 跟隨手指 : followFinger 設(shè)置為false 手指滑動(dòng)和頁(yè)面滑動(dòng)不同步
- 定義longSwipes : longSwipesMs
- 短時(shí)間短距離和長(zhǎng)時(shí)間長(zhǎng)距離 : shortSwipes 和longSwipes
- 觸發(fā)所需最小拖動(dòng)距離比例 : longSwipersRadio
- 允許拖動(dòng)角度 : touchAngle
(2)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.swiper-container {
width: 800px;
height: 300px;
border: 10px solid #ccc;
}
.swiper-slide {
font-size: 50px;
}
.swiper-slide:nth-of-type(1) {
background: yellow;
}
.swiper-slide:nth-of-type(2) {
background: blue;
}
.swiper-slide:nth-of-type(3) {
background: red;
}
</style>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
</body>
<script>
window.onload = function() {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', //上下滑動(dòng)哄褒，要是橫著滑就是horizontal,要是豎著滑vertical
touchRatio: 0.2, //設(shè)置的越小越難以滑動(dòng)
onlyExternal: true, //設(shè)置成true就無(wú)法滑動(dòng),默認(rèn)就是false
followFinger: false, //跟隨手指設(shè)置false滑動(dòng)和手指不同步了
longSwipesMs: 1000, //定義了當(dāng)你按下到滑動(dòng)的一個(gè)時(shí)間
longSwipes: false, //是否允許長(zhǎng)時(shí)間滑動(dòng)匠抗，設(shè)置為false那上面的longSwipesMs不起作用
shortSwipes: true, //是否允許短時(shí)間滑動(dòng)
longSwipersRadio: 0.9, //相對(duì)于容器的最大距離。0.9表示滑動(dòng)90%的距離才到下一個(gè)
touchAngle: 10, //允許滑動(dòng)的角度西乖，設(shè)置的越小表示越難以滑動(dòng)
})
}
</script>
</html>
