swiper是一款普遍使用的插件,写轮播用的比较多。今天写H5页面准备全局用这个插件,移动端滑页。
首先引入两个文件
<
link
rel=
"stylesheet"
href=
"swiper.min.css"
>
<
script
src=
"swiper.min.js"
>
<
/
script
>
直接贴demo模板,调用添加了一些属性
<
body
>
<!-- Swiper -->
<
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
class=
"swiper-slide"
>Slide 4
</
div
>
<
div
class=
"swiper-slide"
>Slide 5
</
div
>
<
div
class=
"swiper-slide"
>Slide 6
</
div
>
</
div
>
<!-- Add Pagination -->
<
div
class=
"swiper-pagination"
></
div
>
<!-- Add Arrows -->
<!-- <div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div> -->
</
div
>
<!-- Swiper JS -->
<
script
src=
"../dist/js/swiper.min.js"
>
<
/
script
>
<!-- Initialize Swiper -->
<
script
>
var
swiper =
new
Swiper(
'.swiper-container', {
direction :
'vertical',
//方向 默认为横向,改成纵向
pagination: {
el:
'.swiper-pagination',
type:
'fraction',
},
navigation: {
nextEl:
'.swiper-button-next',
prevEl:
'.swiper-button-prev',
},
scrollbar: {
el:
'.swiper-scrollbar',
//左侧显示滑动条
},
lazy: {
loadPrevNext:
true,
//设置为true允许将延迟加载应用到下一个的slide的图片
},
autoHeight:
true
//超出高度自动延长
});
<
/
script
>
</
body
>
关于autoHeight补充一些,因为有个slide中内容图片太长,需要在slide内再添加一个滑动阅读功能,
参考小乔FEer的博客 有关于swiper内容超出添加横向/纵向滚动。
第一步 要给swiper-slide添加overflow属性
.swiper-slide {
overflow:
auto;
-webkit-overflow-scrolling:
touch;
}
然后在js中添加
1. 纵向超出部分滚动
var
swiper =
new
Swiper(
'.swiper-container', {
direction:
'vertical',
autoHeight:
true
});
var
startScroll,
touchStart,
touchCurrent;
swiper.
slides.
on(
'touchstart',
function (
e) {
startScroll =
this.
scrollTop;
touchStart =
e.
targetTouches[
0].
pageY;
},
true);
swiper.
slides.
on(
'touchmove',
function (
e) {
touchCurrent =
e.
targetTouches[
0].
pageY;
var
touchesDiff =
touchCurrent -
touchStart;
var
slide =
this;
var
onlyScrolling =
(
slide.
scrollHeight >
slide.
offsetHeight ) &&
//allow only when slide is scrollable
(
(
touchesDiff <
0 &&
startScroll ===
0 ) ||
//start from top edge to scroll bottom
(
touchesDiff >
0 &&
startScroll === (
slide.
scrollHeight -
slide.
offsetHeight ) ) ||
//start from bottom edge to scroll top
(
startScroll >
0 &&
startScroll < (
slide.
scrollHeight -
slide.
offsetHeight ) )
//start from the middle
);
if (
onlyScrolling) {
e.
stopPropagation();
}
},
true);
2.横向超出部分滚动
var
swiper =
new
Swiper(
'.swiper-container', {
slidesPerView:
'auto'
});
var
startScroll,
touchStart,
touchCurrent;
swiper.
slides.
on(
'touchstart',
function (
e) {
startScroll =
this.
scrollLeft;
touchStart =
e.
targetTouches[
0].
pageX;
},
true);
swiper.
slides.
on(
'touchmove',
function (
e) {
touchCurrent =
e.
targetTouches[
0].
pageX;
var
touchesDiff =
touchCurrent -
touchStart;
var
slide =
this;
var
onlyScrolling =
(
slide.
scrollWidth >
slide.
offsetWidth ) &&
//allow only when slide is scrollable
(
(
touchesDiff <
0 &&
startScroll ===
0 ) ||
//start from left edge to scroll right
(
touchesDiff >
0 &&
startScroll === (
slide.
scrollWidth -
slide.
offsetWidth ) ) ||
//start from right edge to scroll left
(
startScroll >
0 &&
startScroll < (
slide.
scrollWidth -
slide.
offsetWidth ) )
//start from the middle
);
if (
onlyScrolling) {
e.
stopPropagation();
}
},
true);