移动端html5 自动生成下拉刷新控件

原创 2015年04月16日 16:25:19

移动APP中很多页面可以下拉实现刷新,在此实现html5版本的下拉刷新控件。

      实现思路:

1.html页面的需要下拉刷新的容器加个类名scrollWrap(任意,和JS中匹配即可)

2.写JS,在上面的容器上动态创建控件(下拉刷新控件,即手机APP中常见到的,下拉后有个加载圈在转,并提示下拉刷新。。)

3.给容器添加touch事件

       实现步骤:

1.html页面如下:

<!--下拉该div,给该div加上class:scrollWrap-->

<div class="container scrollWrap" >

我是正文内容

我是正文内容

</div>

<script type="text/javascript" src="./js/scroll.js"></script>

<script>

window.onload = function(){

var qscroll = new qScroll(refesh);//refresh为回调函数

}

function refresh(){

console.info("刷新页面请求在这里写");

}

</script>

2.js关键代码如下:

var style = document.createElement('style'); 

style.type = 'text/css'; 

style.innerHTML='.loadDiv{margin-top:-60px;text-align: center;position: relative;}此处省略下拉控件的样式‘;

document.getElementsByTagName('HEAD').item(0).appendChild(style);//添加该样式到你的页面

var wrap = document.getElementsByClassName("scrollWrap")[0];

doc.body.insertBefore(div,wrap);////把动态创建的div添加到下拉容器的上面

var qScroll = function(callBack){

var that = this;

that.callBack = callBack;//注册回调函数

that._bind(START_EV,wrap);//绑定touchstart事件

};   

完整代码请下载:http://download.csdn.net/detail/bewhatyouare/8601089

Html5模拟android上拉/下拉刷新

参考地址:maxzhang/dragloader
  • xb12369
  • xb12369
  • 2014年09月11日 10:05
  • 40085

html5上拉下拉刷新分页实现

html5上拉下拉刷新分页实现 h5页面上用到的上拉下拉翻页刷新数据,兼容性还行,有一个不大满意的地方在上拉下拉滚屏的时候有时会闪屏(闪一下,跳到原来的位置,而不是最新拉到的位置),如果这个问题能...
  • huwei2003
  • huwei2003
  • 2016年07月23日 17:26
  • 8519

使用APICloud编写优雅的HTML5代码《一》:下拉刷新、上拉加载更多

摘要: 发​现​A​P​I​C​l​o​u​d​倡​导​符​合​C​M​D​以​及​A​M​D​规​范​的​J​S​编​码​标​准​,​提​供​基​于​H​T​M​L​5​的​跨​平​台​A​p​p​...
  • a297487901
  • a297487901
  • 2017年08月01日 15:27
  • 1079

html5+css3实现上拉和下拉刷新

温馨提示:该HTML运行之前需下载iscroll.js,并引入 html> html> head> meta http-equiv="Content-Type" content="text/...
  • u013005675
  • u013005675
  • 2017年04月07日 19:34
  • 873

下拉刷新html

ionic         angular         $http--服务         ng-    指令         表达式  {{}}                 刷...
  • ZhaoJingCong4880
  • ZhaoJingCong4880
  • 2017年11月16日 14:33
  • 80

html5下拉刷新控件

  • 2015年04月16日 16:30
  • 3KB
  • 下载

移动端下拉刷新、上拉加载更多插件dropload

参看 下载   https://github.com/pfan123/dropload 引用css和js html js内容 $('.element')...
  • qq_33769914
  • qq_33769914
  • 2016年11月04日 16:08
  • 7556

移动端下拉刷新、上拉异步加载的插件以及轮播图插件

https://pan.baidu.com/s/1eSOOm2m dropload+swiper最近项目中用到了这两个插件,十分好用。这里简单介绍一下。一.dropload 1.引入css和js...
  • u012318873
  • u012318873
  • 2017年04月11日 10:10
  • 1328

移动端 下拉刷新 &amp; 上拉加载 组件

  • 2017年08月31日 20:59
  • 60KB
  • 下载

移动端实现简单的下拉刷新【web前端】

说明本文完全是个人学习,实现并不做过多的功能封装。实现原理依赖元素的 overflow-y: auto 的属性,实现滚动轴。通过改变 “刷新提醒”的元素的高度,达到下拉的效果。如图:例如,有如下的结构...
  • linfenpan
  • linfenpan
  • 2015年11月13日 15:16
  • 13232
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:移动端html5 自动生成下拉刷新控件
举报原因:
原因补充:

(最多只允许输入30个字)