前言

在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受。我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果,我很喜欢。感觉有回应。

现在开始实现我页面的第一个交互效果,让我的页面更生动一点。

实现的插件

基于iScroll.js插件

代码

html

<div class="header">我是头部固定</div>

<div id="wrapper">

<div id="scroller">

<div id="pullDown"> <span class="pullDownLabel">下拉刷新</span> </div>

<ul id="thelist">

<li>我是小公举</li>

<li>我是小公举</li>

<li>我是小公举</li>

<li>我是小公举</li>

<li>我是小公举</li>

<li>我是小公举</li>

<li>我是小公举</li>

<li>我是小公举</li>

<li>我是小公举</li>

<li>我是小公举</li>

<li>我是小公举</li>

</ul>

<div id="pullUp"><span class="pullUpLabel">上拉加载更多</span></div>

</div>

</div>

<div class=""footer>我是底部固定</div>

css

*{margin:0;padding:0}

body{font-size:12px}

li{list-style:none}

.header{position:absolute;top:0;left:0;width:100%;height:45px;line-height:45px;text-align:center;color:#333;font-size:16px}

.footer{position:absolute;bottom:0;left:0;width:100%;height:45px;line-height:45px;text-align:center;color:#333;font-size:16px}

#wrapper{position:absolute;top:45px;left:0;bottom:48px;width:100%;}

#wrapper #scroller .thelist li{height:60px;padding:0 10px;line-height:60px;background:#ecf6ff;margin-top:10px;}

#pullDown,#pullUp{height:30px;line-height:30px;padding:0 10px;color:#888;text-align:center}

javascript

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

<script>

var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;

function loaded(){

pullDownEl = document.getElementById('pullDown');

pullDownOffset = pullDownEl.offsetHeight;      //获取下拉刷新的div高度 30

pullUpEl = document.getElementById('pullUp');

pullUpOffset = pullUpEl.offsetHeight;               // 获取上拉加载的div高度 30

myScroll = new iScroll('wrapper',{

useTransition: true,                 //options.useTransition 默认为true,支持css transition 动画;

topOffset: pullDownOffset,     //通过topOffset参数属性设置iScroll已经滚动的基准值;

onRefresh: function(){             //通过onRefresh参数方法调整刷新后的界面结构

if(pullDownEl.className.match('loading')){

pullDownEl.className= '' ;

pullDownEl.querySelector('.pullDownLabel').innerHtml = '下拉刷新' ;

} else if (pullUpEl.className.match('loading')){

pullUpEl.className = '' ;

pullUpEl.querySelector('.pullUpLabel').innerHtml = '上拉加载更多' ;

}

},

onScrollMove: function(){                         //通过onScrollMove参数方法判断当前滚动是在顶端还是底端

if(this.y > 5 && !pullDownEl.className.match('flip')){

pullDownEl.className = 'flip' ;

pullDownEl.querySelector('.pullDownLabel').innerHtml = '刷新释放' ;

this.minScrollY = 0;

} else if(this.y < 5 && pullDownEl.className.match('flip')){

pullDownEl.className = ' ' ;

pullDownEl.querySelector('.pullDownLabel').innerHtml = 'Pull down to refresh...' ;

this.minScrollY = -pullDownOffset;

} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match(flip)){

pullUpEl.className = 'flip';

pullUpEl.querySelector('.pullUpLabel').innerHtml = '释放刷新';

this.maxScrollY = this.maxScrollY;

} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')){

pullUpEl.className = ' ';

pullUpEl.querySelector('.pullUpLabel').innerHtml = 'Pull up to load more...;

this.maxScrollY = pullUpOffset;

}

},

onScrollEnd: function(){

if(pullDownEl.className.match('flip')){

pullDownEl.className = 'loading';

pullDownEl.querySelector('.pullDownLabel').innerHtml = '加载中';

pullDownAction();

} else if(pullUpEl.className.match('flip')){

pullUpEl.className = 'loading';

pullUpEl.querySelector('.pullUpLabel').innerHtml = '加载中';

pullUpAction();

}

},

});

loadAction();

};

document.addEventListener('touchmove',function(e){

e.preventDefaule();

},false);  //阻止冒泡

document.addEventListener('DOMContentLoaded',function(){

setTimeout(loaded,0)

}.false);   //当DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash。

//初始状态,加载数据

function loadAction(){

var el, li;

el = document.getElementById('thelist');

for(var i = 0; i < 10; i++){

li = doument.createElement('li');

li.innerHtml = '初始数据--' + (++generatedCount);

el.appendChild(li, el.childNodes[0]);

};

myScroll.refresh();

};

//下拉刷新当前数据

function pullDownAction(){

setTimeout(function(){

//这里执行刷新操作

myScroll.refresh();

},400);

};

//上拉加载更多数据

function pullUpAction(){

setTimeout(function() {

var el, li;

el = document.getElementById('thelist');

for(var i = 0; i < 10; i++){

li = doument.createElement('li');

li.innerText= '上拉加载--' + (++generatedCount);

el.appendChild(li, el.childNodes[0]);

};

myScroll.refresh();

},400);

}

//ajax

eg:  function pullUpAction(){

setTimeout(function(){

var el, li, i;

document.getElementById("thelist");

//========================

$.ajax({

type: "GET",

url: "LoadMore.aspx",

data: { page: generatedCount },

dataType: "json",

success: function(data){

var json = data;

$(json).each(function(){

li = document.createElement('li');

li.innerHtml = ' XXXXXXXXXXXX';

el.insetBefore(li, el.childNodes[0]);

})

}

});

//==========================

myScroll.refesh();

},1000);

}

</script>

参考搬运代码地址:http://blog.csdn.net/xw505501936/article/details/48975991

H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多的更多相关文章

  1. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  2. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  3. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  4. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  5. Android如何定制一个下拉刷新,上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  6. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  7. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  8. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

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

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

随机推荐

  1. SpringBoot整合Thymeleaf

    一个整合Thymeleaf与Mybatis的CRUD例子 整合Mybatis例子 一.添加maven依赖 <dependency> <groupId>org.springfra ...

  2. 正则表达式匹配:根据key获取value

    需求 url请求html字符串,dytk值写在js里,可以看成是key-value的格式,需要提取dytk值. 解决方法 正则匹配 private string get_dytk(string htm ...

  3. document节点的一些个性属性

    <ol> <li>document.head:返回文档的< head>节点:</li> <li>document.body:返回文档的< ...

  4. react事件代理

    参考:https://github.com/youngwind/blog/issues/107 首先回顾以下原生事件的两个方法:event.stopImmediatePropagation 和 eve ...

  5. C语言获取Shell返回结果

    Linux编程时候,如果我们需要调用shell命令或脚本通常使用system方法.如system("ls") 该方法返回值为0或-1,即成功或失败.而有的时候我们想要获取shell ...

  6. 《零基础入门学习Python》【第一版】视频课后答案第006讲

    python中被看作假:FALSE  none 0  ‘ ’  " "  ( ) [ ] { },其他一切都被解释为真 测试题答案: 0.Python 的 floor 除法现在使用 ...

  7. python 游戏(滑动拼图Slide_Puzzle)

    1. 游戏功能和流程图 实现16宫格滑动拼图,实现3个按钮(重置用户操作,重新开始游戏,解密游戏),后续难度,额外添加重置一次的按钮,解密算法的植入,数字改变为图片植入 游戏流程图 2. 游戏配置 配 ...

  8. python--网络通信协议

    一 . osi七层协议 互联网协议按照功能不同分为osi七层或tcp/ip五层或tcp/ip四层 二 . tcp三次握手和四次挥手 我们知道网络层,可以实现两个主机之间的通信.但是这并不具体,因为,真 ...

  9. Python9-内置函数2-day16

    #zip方法 l = [1,2,3] l2 = ['a','b','c'] l3 = ('*','**',[1,2]) l4 = {'k1':1,'k2':2} for i in zip(l,l2,l ...

  10. GYM 101350 G

    G. Snake Rana time limit per test 4.0 s memory limit per test 256 MB input standard input output sta ...