下拉刷新/上拉加载更多/上滑加载更多-移动端

**元素容器**
`<div class="wrap"></div>`

**下拉载入更多处理方法**
```javascript
<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script>
var page=2;//从第二页请求数据
Zepto(function($){
  $(window).scroll(function(){
    if(($(window).scrollTop() + $(window).height() > $(document).height()-40)){
      ajaxData();
    }
  });
})
//定义ajax请求数据方法 可以考虑公用
function ajaxData(){
  $.get("/mobile/get_list/news/",{page:page},function(result){
    var list = '';
    var res = JSON.parse(result);//从字符串中解析出json对象
    //console.log(res.data);
    if(res.code == '200'){ //这里数字200表示接口返回的数据读取正常的状态码
      $('#overlist').remove();//移除'已加载完毕'的提示div
      for(var i=0;i<res.data.length;i++){//循环组装数据        
        list += '<div class="item"><a class="cont" href="/mobile/detail/id/'+res.data[i].id+'">'+
          '<div class="title">'+res.data[i].title+'</div>'+
          '</a></div >';
      }
    }else{
      if($("#overlist").length<=0){//数据请求完毕追加提醒
        $('.wrap').append('<div id="overlist">已加载完毕</div>');
      }
      return false;
    }
    $('.wrap').append(list);
  })
  page++;
}
</script>
```

本文最后更新于 2019-06-27 13:52:38 并被添加「zepto」标签，已有 3663 位童鞋阅读过。

本文作者：未来往事

本文链接：https://felixway.cn/post/616.html

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

下拉刷新/上拉加载更多/上滑加载更多-移动端

此处评论已关闭