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. 初探Java多线程

    多线程是由Java提出的概念,那么什么是线程呢?这里会涉及到几个名字听着很类似的东西:程序.线程.进程. 程序:存储在磁盘上的一系列的文件,包括可执行文件和不可执行文件. 进程:在内存中,每一个程序都 ...

  2. yaf插件类的使用

    yaf插件类的使用大小写敏感的. "插件名Plugin"为插件类的名字,这样会自动标志着这是一个插件. application.directory string 应用程序的目录,包 ...

  3. Luogu P1596 [USACO10OCT]湖计数Lake Counting

    题目描述 Due to recent rains, water has pooled in various places in Farmer John's field, which is repres ...

  4. 搭建多系统yum服务器

    一.多系统服务器搭建 1.首先挂载光盘 2.安装vsftp 3.使用rpm -ql vsftpd查看vsftpd安装时都产生了哪些文件,找到以.server结尾的文件路径.此文件的文件名就是vsftp ...

  5. VUE PK REACT(1)

    一.浏览器兼容性 vue: ie9+ react: ie8+ 二.安装使用 vue:1.直接引入  <script src="https://cdn.jsdelivr.net/npm/ ...

  6. 网络基础tcp/ip协议五

    传输层的作用: ip层提供点到点的链接. 传输层提供端到端的链接. 传输层的协议: TCP: 传输控制协议可靠的,面向链接的协议,传输效率低. UDP: 用户数据报协议,不可靠,无连接的服务,传输效率 ...

  7. 如何将ubuntu控制台输出到串口？

    如何将ubuntu控制台输出到串口? Linux使用ubuntu14.04发行版本 操作步骤: 1.修改/etc/default/grub ## Modify this line by leekwen ...

  8. FFMPEG 实现 YUV，RGB各种图像原始数据之间的转换（swscale）

    FFMPEG中的swscale提供了视频原始数据(YUV420,YUV422,YUV444,RGB24...)之间的转换,分辨率变换等操作,使用起来十分方便,在这里记录一下它的用法. swscale主 ...

  9. SVN同步出现问题

    1.错误描述    同步SVNStatusSubscribe时报告了错误,1中的0个资源已经同步    同步/frame时发生错误:Error getting status for resource ...

  10. java实现在线支付

    国内电子商务系统实现的基本流程如下: 客户在系统内下订单 -> 系统根据订单生成支付宝接口url -> 客户通过url使用支付宝(网上银行)付款 -> 支付宝将客户的付款完成信息发送 ...