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. AGC010 - A: Addition

    原题链接 题意简述 给出一个个数的数列,每次选出两个奇偶性相同的数合成一个数,问最终能否只剩下一个数. 分析 非常简单的一道题. 两个偶数可以合成一个偶数,两个奇数也能合成一个偶数.所以合并偶数时偶数 ...

  2. Docker mongodb 3.4 分片 一主 一副 一仲 鉴权集群部署.

    非docker部署 为了避免过分冗余,并且在主节点挂了,还能顺利自动提升,所以加入仲裁节点 为什么要用docker部署,因为之前直接在虚拟机启动10个mongod 进程.多线程并发测试的时候,mong ...

  3. Jmeter简单介绍与搭配Jenkins实现自动化

    Jmeter简介 Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具.用于对软件做压力测试,它最初被设计用于 Web应用测试,但后来扩展到其他测试领域. 它可以用于 ...

  4. python开发【第一篇】

    内容编码 python解释器在加载.py文件的时候,会对内容进行编码(默认是ascii编码). ASCII 是基于拉丁系统的一套电脑编码系统, 主要用于显示现代英语和其他西欧语言,其最多只能用8位来表 ...

  5. Mysql group by,order by,dinstict优化

    1.order by优化 2.group by优化 3.Dinstinct 优化 1.order by优化 实现方式: 1. 根据索引字段排序,利用索引取出的数据已经是排好序的,直接返回给客户端: 2 ...

  6. Android Scheme协议与应用全解析

    URL Scheme 的作用 客户端应用可以向操作系统注册一个 URL Scheme,该 Scheme 用于从浏览器或其他应用中启动本应用. 通过指定的 URL 字段,可以让应用在被调起后直接打开某些 ...

  7. sudo:无法解析主机 解决方案

    你如果电脑中没有vim,用gedit也可以. 打开文件以后,将其中的 127.0.1.1  xxxxx xxx 替换成你电脑的自己的名字即可.

  8. AXI总线简介

    AXI全称Advanced eXtensible Interface,是Xilinx从6系列的FPGA开始引入的一个接口协议,主要描述了主设备和从设备之间的数据传输方式.在ZYNQ中继续使用,版本是A ...

  9. 举例MyBatis的常用的API及方法

    在使用MyBatis框架是,主要涉及以下几个API: 1.SqlSessionFactoryBuilder该对象根据MyBatis配置文件SqlMapConfig.xml构建SQLSessionFac ...

  10. 一次SQL慢查询的优化处理

    背景 在开发完成,数据验证的过程中,需要对两个非常大的表进行query,运行了十几分钟都跑不完.如下: select * from big_a a, big_b b where a.some_id = ...