模拟移动端上拉加载功能

来源：互联网发布：linux 安装jdk gz文件编辑：程序博客网时间：2024/06/05 19:35
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>上拉加载</title><style>html{font-size: 18px;}.containter{background: #ccc;height: 700px;overflow: auto;}.content{}.item{font-size: 3rem;text-align: center;}.bottom-line{text-align: center;background: #666}</style><!-- $('.bottom-line').css('display','block').text('正在刷新...') --></head><body><div class="containter"><div class="content"><div class="item">上拉加载功能1</div><div class="item">上拉加载功能2</div><div class="item">上拉加载功能3</div><div class="item">上拉加载功能4</div><div class="item">上拉加载功能5</div><div class="item">上拉加载功能6</div><div class="item">上拉加载功能7</div><div class="item">上拉加载功能8</div><div class="item">上拉加载功能9</div><div class="item">上拉加载功能10</div><div class="item">上拉加载功能1</div><div class="item">上拉加载功能2</div><div class="item">上拉加载功能3</div><div class="item">上拉加载功能4</div><div class="item">上拉加载功能5</div><div class="item">上拉加载功能6</div><div class="item">上拉加载功能7</div><div class="item">上拉加载功能8</div><div class="item">上拉加载功能9</div><div class="item">上拉加载功能10</div></div><div class="bottom-line">正在刷新</div></div><script typet="text/javascript" src="zepto.min.js"></script><script>var data = {    num: 0,    startY: '',    moveEndY: '',    isLoading: true,}// 上拉加载$(document).on('touchstart','.content', function(e) {    // e.preventDefault();　　data.startY = e.originalEvent.changedTouches[0].pageY;})$(document).on('touchmove', '.content',function(e) {    // e.preventDefault();　　data.moveEndY = e.originalEvent.changedTouches[0].pageY,　　Y = data.startY - data.moveEndY;    if(Y>80){    upLoading()    }})function upLoading(){    //判断最后一个元素是否在底部之上    if( $('.item').eq($('.item').length-1).offset().top + $('.bottom-line').height() < $('.containter').height() ){        if( data.isLoading === false ){          return        }else{          $('.bottom-line').css('display','block').text('正在刷新...')          //请求数据          getRequestData( data.pageNum,data.thisId )          data.pageNum ++        }    }}//模拟ajax请求数据function getRequestData(pageNum,id){    isLoading = false    var msg = ['请求数据1','请求数据2','请求数据3','请求数据4','请求数据5'];        if( data.num < 5 ){          $('.bottom-line').css('display','none')        addData(msg)        isLoading = true        }else if( data.num >=5 ){          $('.bottom-line').css('display','block').text('数据加载完毕')          setTimeout(function(){            $('.bottom-line').css('display','none')          },1000)          isLoading = false        }        data.num ++}//添加数据function addData( list ){    var str = ''    for( var i = 0; i < list.length; i++ ){      str +=  '<div class="item">' + list[i] + '</div>'    }     $('.content').append(str)}</script></body></html>
阅读全文
0 0