手机端实现滑动底部加载，并数据库取出数据

最新推荐文章于 2022-06-10 15:34:57 发布

有梦想的

最新推荐文章于 2022-06-10 15:34:57 发布

阅读量651

点赞数

本文链接：https://blog.csdn.net/helloworld_dream/article/details/63262563

版权

手机端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

主要是从http://jqweui.com/ 学习到的一款插件

主要是向下滑动的时候，从后台读取数据，而且读剩下的数据，奇思妙想想到了一招。

<ul class="list_ul">
      <volist name="info" id="v">
      <li attr="<{$v.id}>">
        <a href="<{:U('Company/thunder',array('id'=>$v['id']))}>" style="">
          <figure>
            <div>
              <php>$images = string2array($v['image']);</php>
              <img src="<{$images[0]}>">
            </div>
            <figcaption>
              <{$v['title']}> 
            </figcaption>
          </figure>
        </a>
      </li>
      </volist>  
    </ul>

使用的thinkphp3.2框架，

主要就是对待每个li标签增加一个attr属性，是图片的id

$(function(){
  $(document.body).infinite(100);
      var loading = false;  //状态标记
      $(document.body).infinite().on("infinite", function() {
      if(loading) return;
      loading = true;
      //获得最后一个li的id
      setTimeout(function() {
      var id = $('ul.list_ul li:last').attr('attr');
        $.ajax({
          type:'post',
          url:'<{:U("company/style")}>',
          data:{'p':1,'id':id},
          success:function(msg){
            msg = JSON.parse(msg)
              var str = " ";
              console.log(typeof msg) //object
            $.each(msg,function(i,n){
              console.log(typeof n.image)   //字符串
               str +=  '<li attr="'+n.id+'"> <a href="<{:U("Company/thunder",array("id"=>'+n.id+'))}>" style=""> <figure> <div> <php>$images = string2array('+n.image+');</php> <img src="'+n.image.slice(14,37)+'"> </div> <figcaption> '+n.title+' </figcaption> </figure> </a> </li>'

            })
        $(".list_ul").append(str);
          }
        })
        loading = false;
      }, 1500);   //模拟延迟
    });
});

先调用插件里面的代码，主要是在回调函数那里使用ajax 把ul下的最后一个li的id值传递给服务端，服务端通过那个最后id进行where查询大于这个id并且取出10条。

if (IS_AJAX) {
			$id = I('post.id');
			$getInfo = M('CompanyThunder')->order('id')->where(array('id'=>array('gt',$id)))->limit(0,10)->select();
			echo json_encode($getInfo);
		}