上拉加载，下拉刷新

来源：互联网发布：mp288清零软件错误代码编辑：程序博客网时间：2024/06/10 05:00

html
<!DOCTYPE html>
<html>

<head>
<title>55</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi = medium-dpi">
<meta name="format-detection" content="telephone=no">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="./css/swiper-3.3.1.min.css">
<style type="text/css">
* {
padding: 0;
margin: 0;
}

html,
body {
width: 100%;
height: 100%;
}

#wrap {
width: 100%;
height: 100%;
overflow: hidden;
}

.swiper-container {
width: 100%;
height: 100%;
}

.swiper-slide {
font-size: 18px;
height: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.down_refresh {
width: 100%;
height: 0px;
position: relative;
}

.down_refresh p {
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
bottom: 0px;
}

.up_load {
position: relative;
width: 100%;
height: 50px;
text-align: center;
}

.slide-animation {
-webkit-transition: height .2s linear;
}

.list {
min-height: 100%;
}
</style>
</head>

<body>
<div id='wrap'>

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="down_refresh">
下拉刷新。。。
</div>
<div class="list">
<h4>Scroll Container</h4>
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
</div>
<div class="up_load">
上拉加载。。。
</div>
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
</div>
<script type="text/javascript" data-main='./js/text1' src="./js/require.min.js"></script>
</body>

</html>

js requirejs.config({
baseUrl: './js/',
paths: {
"jquery": ["jquery-1.7.1.min"],
"swiper": ["swiper-3.3.1.jquery.min"]
},
shim: {
"swiper": {
deps: ["jquery"],
exports: "swiper"
}
}
});
require(['jquery', 'swiper'], function($, swiper) {
"use strict";
var text1 = (function() {
var init = function(options) {
this.data = options;
plug_in(options);
},
//引入插件
plug_in = function(options) {
var _obj = options;
var swiper = new Swiper('.swiper-container', {
scrollbar: '.swiper-scrollbar',
direction: 'vertical',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
observer: true,
onTouchStart: function() {
swiper.onResize();
if (swiper.isBeginning) {
progress3.call(swiper);
}
if (swiper.isEnd) {
progress3.call(swiper);
}
},
onTouchMove: function() {
//显示下拉刷新
if (swiper.isBeginning && swiper.translate > 0) {
$('.down_refresh').css('height', swiper.translate + 'px');

if (swiper.translate = 60 && !$('.down_refresh p').hasClass('current')) {
progress1.call(swiper);
}
}
if (swiper.isEnd && swiper.translate < 0) {
if (!$('.down_refresh p').hasClass('current')) {
progress1.call(swiper);
}
}
},
onTouchEnd: function() {
if (swiper.isEnd && swiper.translate < 0) {
up_load.call(swiper, _obj);

}
if (swiper.isBeginning && swiper.translate > 0) {
down_refresh.call(swiper, _obj);

}
}
});
},
up_load = function() {
var self = this;
console.log('上拉加载');
progress2.call(self, arguments[0].down)
},
down_refresh = function() {
console.log('下来刷新');
progress2.call(this, arguments[0].up);
},
//下拉状态
progress1 = function() {
var self = this,
id = '.down_refresh p';
if (self.translate > 0) {
id = '.down_refresh p';
} else {
id = '.up_load p';
}
var clear = setTimeout(function() {
clearTimeout(clear);
clear = null;
$(id).text('松开刷新。。。');
}, 300);
$(id).addClass('current');
},
//下拉在加载状态
progress2 = function() {
var fn = arguments[0],
id = '',
self = this,
isLoad = false;
if (this.translate > 0) {
$('.down_refresh').css('height', '60px');
id = '.down_refresh';
$(id).css('height', '60px');
isLoad = true;
} else {
id = '.up_load';
}
$(id + ' p').text('正在加载。。。');
var clear = setTimeout(function() {
clearTimeout(clear);
clear = null;
$(id).addClass('slide-animation');
if (isLoad) {
$(id).css('height', '0px');
}
fn();
}, 500);
},
//下来刷新状态还原
progress3 = function() {
$('.down_refresh p').text('下拉刷新。。。');
$('.up_load p').text('上拉加载。。。');
$('.up_load p').removeClass('current');
$('.down_refresh p').removeClass('current');
$('.up_load').removeClass('slide-animation');
$('.down_refresh').removeClass('slide-animation');
};

return {
init: init
}
})();
$(function() {
text1.init({
up: function() {
$(".list").html("2222222\
22222222222221\
222222222222222222\
222222222222222222\
222222222222222222\
222222222222222222\
222222222222222222\
222222222222222222\
222222222222222222\
22222222222222222");
},
down: function() {
$(".list").append("2222222\
22222222222221\
222222222222222222\
222222222222222222\
222222222222222222\
222222222222222222\
222222222222222222\
222222222222222222\
222222222222222222\
22222222222222222");
$('.up_load p').text('上拉加载。。。');
}
});
});
});

0 0