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>

手机端原生js实现下拉刷新数据的更多相关文章

  1. 原生js模仿下拉刷新功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 原生JS实现下拉刷新

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  3. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  4. javascript+html5+css3下拉刷新 数据效果

    文章摘自:suchso.com/projecteactual/javascript-html5-css3-taobao-xiala-data.html segmentfault.com/a/11900 ...

  5. mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉

    空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...

  6. 完美解决，浏览器下拉显示网址问题 | 完美解决，使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  7. 基于iscroll.js实现下拉刷新和上拉加载特效

    现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...

  8. 使用mui.js实现下拉刷新

    闲聊: 最近因公司项目需求,小颖需要写一些html5页面,方便公司IOS和Android给APP中嵌套使用,其中需要实现拉下刷新功能,其实就是调用了一下mui.js就可以啦嘻嘻,下面跟着小颖一起来看看 ...

  9. js的下拉刷新和上拉加载，基于iScroll v4.2.5

    html部分 <div id="wrapper" style="height: 100%"> <div id="scroller&q ...

随机推荐

  1. 网卡驱动引起openstack的mtu问题

    一套Pike版本的openstack测试环境,使用vlan模式的网络,数据网网卡使用的是绿联的usb百兆网卡,遇到了虚拟机网络异常的问题.同一个vlan下,不同宿主机上的两台虚拟机,相互之间可以pin ...

  2. SPFA+SLF+LLL优化模板

    #include<algorithm> #include <iostream> #include <cstdlib> #include <cstring> ...

  3. ubuntu追加磁盘空间

    在用wubi安装的时候,按默认的是20G空间,明显不够用,从Windows上追加空间 首先用win7自带的磁盘分区工具,从任意一个空余空间较多的磁盘划出一块新分区(无损数据)(如NTFS),作为ubu ...

  4. 机器学习中应用到的各种距离介绍（附上Matlab代码）

    转载于博客:各种距离 在做分类时常常需要估算不同样本之间的相似性度量(SimilarityMeasurement),这时通常采用的方法就是计算样本间的"距离"(Distance). ...

  5. Linux 系统裁剪笔记 4 （内核配置选项及删改）

     CDROM filesystem support(CONFIG_ISO9660_FS)[Y/m/n/?]有标准光驱的系统应该选Y.Minix fs support(CONFIG_MINIX_FS)[ ...

  6. Maximum Entropy Model(最大熵模型)初理解

    0,熵的描述 熵(entropy)指的是体系的混沌的程度(可也理解为一个随机变量的不确定性),它在控制论.概率论.数论.天体物理.生命科学等领域都有重要应用,在不同的学科中也有引申出的更为具体的定义, ...

  7. ArgumentError：Error #2004:某个参数无效

    1.错误描述 ArgumentError:Error #2004:某个参数无效 at flash display::Graphics/drawRect() at ZeroClipboard() 2.错 ...

  8. 小白学爬虫-批量部署Splash负载集群

    整体目录如下: study@study:~/文档/ansible-examples$ tree Splash_Load_balancing_cluster Splash_Load_balancing_ ...

  9. 畅通工程再续 HDU - 1875

    相信大家都听说一个"百岛湖"的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实现.现在政府决定大力发展百岛湖,发展首先要解决的问题当然是交通问题,政 ...

  10. js中百分比运算,大型数据会算错

    改法:被除数乘100在做除法运算,就能改掉算错