上拉加载，下拉刷新

最新推荐文章于 2023-12-30 09:15:00 发布

风的中心

最新推荐文章于 2023-12-30 09:15:00 发布

阅读量292

点赞数

本文链接：https://blog.csdn.net/u013716510/article/details/51743053

版权

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('上拉加载。。。');
}
});
});
});