打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
webapp(微店)列表页上拉动态加载,动态分页效果实现方式
①引入一个插件iscroll.js
<script src="__JS__/iscroll.js"></script>
②定义div
<body onload="loaded()">
<div id="wrapper">
<div class="zybd">
<div class="prolist ml10">
<div class="list" id = "J_probd">
<foreach name="granges['content']" item="item">
<a class="list-a cl" href="/Grange/home?gid={$item['gid']}">
<div class="list-l">
<img src="__IMAGES__/fl_loading.gif" data-src="{$item['img_url']}" class="list-img J_loadSrc"  alt="">
</div>
<div class="list-r">
<div class="list-name">{$item['name']}</div>
<div class="list-dec">
<foreach name="item[projects]" item='item2'>
<span class="list-tip">{$item2}</span>
</foreach>
</div>
<div class="list-bom">
<div class="fr">
<span class="listol-pri">
<span class="pri-tj">¥<span class="pri-sz">{$item['budget']|number_format=2}</span>起</span>
</span>
</div>
<span class="list-bom">
<i class="iconfont zybd-txt-ico">&#xe613;</i>
{$item['address']}
</span>
</div>
</div>
 </a>
</foreach>
</div>
<gt name="granges.total" value="$count">
      <div>
  <a class="prolist-abtn" >上拉加载更多</a>
  </div>
      <else/>
      <div>
  <a class="prolist-abtn" >已全部加载完</a>
  </div>
    </gt>
</div>
</div>
</div> 

③js调用,用ajax动态到服务器获取数据

<script>
//上拉刷新模拟数据
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper',{click:true});
var page = 1;
var pageSize = 6;
var sort = "{$sort}";
var areaId = "{$areaId}";
var project = "{$project}";
myScroll.on('scrollEnd',function() {
if(this.y==this.maxScrollY) {
page++;
/*上拉到底部事件*/
var str = '';
 $.ajax({
               url:"/Grange/listAll",
               type:'Get',
               dataType:'json',
               data:'page='+ page +'&sort='+sort+'&areaId='+areaId+'&project='+project+'&pageSize='+pageSize+'&ajax=1'+'&time='+new Date()
           }).done(function(result) {
            /*数据protest与page结合调用不同的数据*/
            /* var productList = eval('(' + result.info + ')'); */
            if( result.info =="[]" ) {
            $('.prolist-abtn').html('已全部加载完');
            return;
            }
   $.each(eval('(' + result.info + ')'), function(i, v) {
  str+= '<a class="list-a cl" href=/Grange/home?gid='+v.gid+'>';
  str+= '<div class="list-l">';
  str+= '<img src="__IMAGES__/fl_loading.gif" data-src="'+v.img_url+'" class="list-img J_loadSrc"  alt="">';
  str+= '</div>';
  str+= '<div class="list-r">';
  str+= '<div class="list-name">'+v.name+'</div>';
  str+= '<div class="list-dec">';
  $.each(v.projects, function(i,val){ 
  str+= '<span class="list-tip">'+val+'</span>';
  });   
  str+= '</div>';
  str+= '<div class="list-bom">';
  str+= '<div class="fr">';
  str+= '<span class="listol-pri">';
  str+= '<span class="pri-tj">¥<span class="pri-sz">'+v.budget+'</span>起</span>';
  str+= '</span>';
  str+= '</div>';
  str+= '<span class="list-bom">';
  str+= '<i class="iconfont zybd-txt-ico">&#xe613;</i>';
  str+= v.address;
  str+= '</span>';
  str+= '</div>';
  str+= '</div>';
  str+= '</a>';
  }); 
  /*1*/
  $('#J_probd').append(str);
  loadSrc();
  setTimeout(function () {
     myScroll.refresh();
     }, 1000);
           }).fail(function() {
               console.log("2");
           })
}
});
}

</script>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
评论到底部自动加载新评论
主页显示数据的处理
jQuery ajax实现顶一下,踩一下效果
javascript写的简单的计算器,内容很多,方法实用,推荐
图片浏览(附带样式+效果)
Jquery实现挂号平台首页源码2
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服