您的位置：首页 > Web前端 > JavaScript

JAVASCRIPT超级简单的上拉刷新下拉加载

2016-12-07 16:08 344 查看

可拖动的盒子swiper-containerswiper-wrapper
数据加载loading preloader

html:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
html {
height: 100%;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
position: relative;
height: 100%;
background: #333;
box-shadow: 0px 0px 100px #000 inset;
}
.preloader {
position: absolute;
left: 0;
top: -100px;
z-index: 0;
color: #fff;
text-align: center;
line-height: 100px;
height: 100px;
width: 100%;
opacity: 0;
font-size: 25px;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-ms-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
background: rgba(0,0,0,0.1);
}
.preloader.visible {
top: 0;
opacity: 1;
}
.swiper-container {
width: 100%;
height: 100%;
color: #fff;
text-align: center;
position: relative;
z-index: 10;
}
.red-slide {
background: #ca4040;
}
.blue-slide {
background: #4390ee;
}
.orange-slide {
background: #ff8604;
}
.green-slide {
background: #49a430;
}
.pink-slide {
background: #973e76;
}
.swiper-slide {    //上拉弹回
height: 100px;
width: 100%;
line-height: 100px;
opacity: 0.2;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-ms-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}
.swiper-slide-visible {
opacity: 1;
}
.swiper-slide .title {
font-style: italic;
font-size: 42px;
}
</style>
</head>
<body>
<div class="preloader"> Loading... </div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide red-slide">  //swiper-slide 上拉弹回
<div class="title">Slide 1</div>
</div>
<div class="swiper-slide blue-slide">
<div cla
4000
ss="title">Slide 2</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 3</div>
</div>
<div class="swiper-slide green-slide">
<div class="title">Slide 4</div>
</div>
<div class="swiper-slide pink-slide">
<div class="title">Slide 5</div>
</div>
<div class="swiper-slide red-slide">
<div class="title">Slide 6</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 7</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 8</div>
</div>
</div>
</div>
<script>
var holdPosition = 0;
var mySwiper = new Swiper('.swiper-container',{
slidesPerView:'auto',
mode:'vertical',
watchActiveIndex: true,
onTouchStart: function() { //触摸开始
holdPosition = 0;
},
onResistanceBefore: function(s, pos){//下拉返回位置pos
console.log(pos+"1111111111");
holdPosition = pos;
},
onResistanceAfter: function(s,pos){//上拉拉返回位置pos
console.log(pos+"222222222");
},
onTouchEnd: function(){//触摸结束
console.log(holdPosition);
if (holdPosition>100) {
mySwiper.setWrapperTranslate(0,100,0)
mySwiper.params.onlyExternal=true
$('.preloader').addClass('visible');
loadNewSlides();
}
}
})
var slideNumber = 0;
function loadNewSlides(){
setTimeout(function(){
//Prepend new slide
var colors = ['red','blue','green','orange','pink'];
var color = colors[Math.floor(Math.random()*colors.length)];
mySwiper.prependSlide('<div class="title">jphtml.com '+slideNumber+'</div>', 'swiper-slide '+color+'-slide');
//Release interactions and set wrapper
mySwiper.setWrapperTranslate(0,0,0)
mySwiper.params.onlyExternal=false;
//Update active slide
mySwiper.updateActiveSlide(0)
//Hide loader
$('.preloader').removeClass('visible');
},2000)
slideNumber++;
}
</script>
</body>
</html>

附上完整zip http://download.csdn.net/download/qq_24886937/9704799

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航