手机端原生js实现下拉刷新数据

时间：2024-01-05 08:48:14

HTML结构如下：

<div class="outerScroller comment">
<div class='scroll comment'>
<div class="inner comment" style='overflow:auto;'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div>
</div>
js代码部分：
! function () {
function scroll(outerscroller, scroll, inner, callback) {
this.outerScroller = document.querySelector(outerscroller);
this.scroll = document.querySelector(scroll);
this.inner = document.querySelector(inner)
this.load = function () {
var _this = this;
this.scroll.style.height = window.innerHeight + 'px';
var touchStart = 0;
var touchDis = 0;
this.outerScroller.addEventListener('touchstart', function (event) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
touchStart = touch.pageY; //获取到按下的页面的位置
}, false);
this.outerScroller.addEventListener('touchmove', function (event) {
var touch = event.targetTouches[0];
console.log(touch.pageY, touchStart)
if (_this.inner.scrollHeight - _this.inner.scrollTop <= _this.inner.clientHeight) {
_this.scroll.style.top = _this.scroll.offsetTop + touch.pageY - touchStart +
'px'; //页面定位的高度+页面移动点的位置-开始按下的页面位置 scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + 'px'
touchStart = touch.pageY; //将当前的位置赋值给开始移动的位置
} else {
return
}
}, false);
this.outerScroller.addEventListener('touchend', function (event) {
touchStart = 0;
var top = _this.scroll.offsetTop;
if (top < -80) callback && callback();
if (top < 0) {
var time = setInterval(function () {
_this.scroll.style.top = _this.scroll.offsetTop + 2 + 'px';
if (_this.scroll.offsetTop >= 0) {
clearInterval(time);
}
}, 1)
}
}, false);
}
this.load();
}
window.scroll = scroll;
}()
var ns = new scroll('.outerScroller', '.scroll', '.inner', function () {
var ul = document.getElementsByTagName('ul')[0];
for (var i = 10; i > 0; i--) {
var node = document.createElement("li");
node.innerHTML = "I'm new" + i;
ul.appendChild(node)
}
})
CSS样式表：
.comment {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
left: 0px;
overflow: hidden;
}
li {
list-style-type: none;
height: 35px;
background: #ccc;
border-bottom: solid 1px #fff;
text-align: left;
line-height: 35px;
padding-left: 15px;
}
ul {
width: 100%;
margin-top: 0px;
position: absolute;
left: 0px;
padding: 0px;
top: 0px;
}
完整的代码如下：
<!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>
<style>
.comment {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
left: 0px;
overflow: hidden;
}
li {
list-style-type: none;
height: 35px;
background: #ccc;
border-bottom: solid 1px #fff;
text-align: left;
line-height: 35px;
padding-left: 15px;
}
ul {
width: 100%;
margin-top: 0px;
position: absolute;
left: 0px;
padding: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="outerScroller comment">
<div class='scroll comment'>
<div class="inner comment" style='overflow:auto;'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div>
</div>
<script>
! function () {
function scroll(outerscroller, scroll, inner, callback) {
this.outerScroller = document.querySelector(outerscroller);
this.scroll = document.querySelector(scroll);
this.inner = document.querySelector(inner)
this.load = function () {
var _this = this;
this.scroll.style.height = window.innerHeight + 'px';
var touchStart = 0;
var touchDis = 0;
this.outerScroller.addEventListener('touchstart', function (event) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
touchStart = touch.pageY; //获取到按下的页面的位置
}, false);
this.outerScroller.addEventListener('touchmove', function (event) {
var touch = event.targetTouches[0];
console.log(touch.pageY, touchStart)
if (_this.inner.scrollHeight - _this.inner.scrollTop <= _this.inner.clientHeight) {
_this.scroll.style.top = _this.scroll.offsetTop + touch.pageY - touchStart +
'px'; //页面定位的高度+页面移动点的位置-开始按下的页面位置 scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + 'px'
touchStart = touch.pageY; //将当前的位置赋值给开始移动的位置
} else {
return
}
}, false);
this.outerScroller.addEventListener('touchend', function (event) {
touchStart = 0;
var top = _this.scroll.offsetTop;
if (top < -80) callback && callback();
if (top < 0) {
var time = setInterval(function () {
_this.scroll.style.top = _this.scroll.offsetTop + 2 + 'px';
if (_this.scroll.offsetTop >= 0) {
clearInterval(time);
}
}, 1)
}
}, false);
}
this.load();
}
window.scroll = scroll;
}()
var ns = new scroll('.outerScroller', '.scroll', '.inner', function () {
var ul = document.getElementsByTagName('ul')[0];
for (var i = 10; i > 0; i--) {
var node = document.createElement("li");
node.innerHTML = "I'm new" + i;
ul.appendChild(node)
}
})
</script>
</body>
</html>

相关文章