首页>新闻资讯>JQ上拉加载(无插件)

JQ上拉加载(无插件)

时间:2018-02-01来源:德盟互联

HTML:

<!DOCTYPE html>

<html lang =“en”>

<head>

<meta charset =“UTF-8”>

<TITLE>晒单墙</ TITLE>

<meta name =“keywords”content =“关键词”>

<meta name =“description”content =“网站描述”>


<script src =“./ themesmobile / 68ecshopcom_mobile / js / jquery.min.js”> </ script>

</ head>

<body>

<div class =“header”>

<a href =“javascript:history.go(-1);” class =“back”> <img src =“images / back.png”alt =“”> </a>

<H1>晒单墙</ H1>

<input id =“num”type =“hidden”name =“”value =“1”>

<a href="release_dry.php" class="release"> <img src =“images / release.png”alt =“”> </a>

</ DIV>

<div class =“dry mt95”>

<ul id =“show_img”>

</ UL>

<div style =“text-align:center;” ID = “MSG”> </ DIV>

</ DIV>


</ body>

<script type =“text / javascript”>

$(function(){

var msg_list_loading = false;

函数pend(){

var pag = $('#num')。val();

     $。员额( “show_orders.php”,{页:PAG},功能(数据){

     var data = JSON.parse(data);

的console.log(数据);

if(data.length!= 0){

        如果(数据){

           var array = data [0];

           var str ='';

           $。每个(数据,函数(指数,阵列){

// 以下蓝色部分根据个人需要输出


tr + =“<li>”;

str + =“   <h2> <a href=''> <img src ='images / dry_head.png'alt =''>”+ array ['user_name'] +“</a> <span>”+ array [ 'add_time'] + “</跨度> </ H2>”

str + =“   <div class ='word'>”;

str + =“   <a href='javascript:void(0);'>”;

str + =“   <p>”+ array ['user_name'] +“</ p>”;

str + =“   <div class ='img'>”;

$。每个(阵列[ 'IMG'],功能(NUM,IMG){

str + =“   <img src ='。/”+ array ['img'] [num] +“'alt =''>”;

});

str + =“   </ div>”;

str + =“   </a>”;

str + =“   </ div>”;

str + =“<div class ='comment'>”;

$。每个(阵列[ '内容'],功能(N,续){

str + =“<div class ='box'>”;

str + =“<a href=''> <img src ='images / dry_head.png'alt =''> </a>”;

str + =“<div>”;

str + =“<h3>”+ cont ['user_name'] +“<span style ='float:right;'>”+ cont ['add_time'] +“</ span> </ h3>”;

str + =“<p>”+ cont ['content'] +“</ p>”;

str + =“</ div> </ div>”;

});

str + =“</ div>”;

str + =“<input type ='text'name ='say'id ='say”+ array ['shaidan_id'] +“'required =''placeholder ='来说点什么'>”;

str + =“<input onclick ='message(”+ array ['shaidan_id'] +“)'type =''value ='提交'>”;

str + =“   <div class ='edit'>”;

str + =“   <a href='show_orders.php?act=get_msg&id="+array['shaidan_id']+"'> <img src ='images / comment.png'alt =''>”“+ array [' NUM'] + “</A>”;

str + =“   <a onclick='zan("+array['shaidan_id']+")' href='javascript:void(0)'>”;

如果(数组[ 'user_click'] == 1){

str + =“<img id ='zan”+ array ['shaidan_id'] +“'src ='images / love_1.png'alt =''>”;

}其他{

str + =“<img id ='zan”+ array ['shaidan_id'] +“'src ='images / love.png'alt =''>”;

}

str + =“<span id ='”+ array ['shaidan_id'] +“'>”+ array ['count_click'] +“<span> </a>”;

str + =“   </ div>”;

str + =“</ li>”;  

           });

           $( “#show_img”)追加(STR)。

       }

   } else {

             $('#msg')。html('没有更多了');

           }    

   });

   PAG ++;

   $( '#NUM')VAL(PAG)。

} pend(); //页面加载完先调用一次


$(window).scroll(function(){

var bot = 1;

     如果((bot + $(window).scrollTop())> =($(document).height() - $(window).height()-1)){

         $('#msg')。正在加载');

       如果(!msg_list_loading){

            msg_list_loading = true;

PEND();

     msg_list_loading = false;

           }

       } else if($(document).scrollTop()<= 0){

              //(“滚动条已经到达顶部为0”);

       }

});

-------------------------------------------------- -------------------------------------------------- ----------------------

------

php:

<?php

$ pager =($ _ POST ['page'] - 1)* 4;

$ usr_id = $ _SESSION ['user_id'];

//下拉加载,每次刷新显示最新的4条

//每次加载显示增加6条

$ sql =“select s.user_id,s.shaidan_id,s.img,s.message,s.add_time,s.count_click,s.user_click,u.user_name from”。$ ecs-> table('shaidan')。's left join“。$ ecs-> table('users')。”u on s.user_id = u.user_id where s.status = 1“。$ where,”order by add_time desc limit“。$ pager。” ,4" ;

$ shaidan = $ db-> getAll($ sql);



$数据=阵列();

 foreach($ shaidan as $ key => $ val){

$ user_str [$ key] = $ val ['user_click'];

$ user_array [$ key] = explode(' - ',substr($ user_str [$ key],1));

$ is_click [$ key] = array_search($ usr_id,$ user_array [$ key]);

if($ is_click [$ key] || $ is_click [$ key] === 0){

$ is_click [$键] = 1;

}其他{

$ is_click [$键] = 0;

}


$ data [$ key] = array(

'user_id'=> $ val ['user_id'],

'shaidan_id'=> $ val ['shaidan_id'],

'img'=> explode(' - ',substr($ val ['img'],1)),//图片字符串转为数组

'message'=> $ val ['message'],

'add_time'=> date(“Ymd H:i”,$ val ['add_time']),

'count_click'=> $ VAL [ 'count_click'],

'user_name'=> $ val ['user_name'],

'user_click'=> $ is_click [$ key],

'num'=> $ db-> getOne(“select count(comment_id)from”。$ ecs-> table('comment')。“其中parent_id =”。$ val ['shaidan_id']),

'content'=> $ db-> getAll(“select c.parent_id,c.user_id,c.content,c.add_time,u.user_name from”。$ ecs-> table('comment')。“c left join “。$ ecs-> table('users')。”u on c.user_id = u.user_id where c.parent_id =“。$ val ['shaidan_id']。”order by c.add_time desc limit 2“)

);

   }

  回波json_encode($数据);出口;

})


</ script>

</ html>