jQuery PHP實現瀏覽更多內容

2022-09-16 14:00:12 字數 1537 閱讀 2969

首先要引入jquery庫和jquery.more.js外掛程式，jquery.more.js已經將許多功能都封裝好了，並提供了引數配置的功能。



xhtml結構如下：






需要指出的是，樣式single_item，get_more是和jquery.more.js外掛程式關聯的，你也可以取另外的class名字，但是在配置的時候一定要將對應的class寫上。


css樣式如下：


#more    


.single_item 


.author 


.date 


.content 


.element_head 


.get_more 


.more_loader_spinner


以上css是本例中定製的，當然，大家可以在實際專案中定製不同的樣式。注意，more_loader_spinner是定義載入動畫的。


jquery部分如下：


$(function()) 


});


php部分：


data.php檔案：


<?php


require_once('connect.php'); 


$last = $_post['last']; 


$amount = $_post['amount']; 


$user = array('demo1','demo2','demo3','demo3','demo4'); 


$query=mysql_query("select * from say order by id desc limit $last,$amount"); 


while ($row=mysql_fetch_array($query)) 


echo json_encode($saylist);


data.php接收前台頁面提交過來的兩個引數，$_post[


'last


']即開始記錄數，$_post['


amount


']即單次顯示記錄數，看sql語句就明白，其實就是分頁中用到的語句。


然後將查詢的結果以json格式輸出，php的任務就完成了。


最後來看下jquery.more.js的引數配置：


'amount'  : '10',   //每次顯示記錄數 


'address' : 'comments.php', //請求後台的位址 


'format' : 'json', //資料傳輸格式 


'template' : '.single_item', //html記錄div的class屬性 


'trigger' : '.get_more', //觸發載入更多記錄的class屬性 


'scroll' : 'false', //是否支援滾動觸發載入 


'offset' : '100', //滾動觸發載入時的偏移量
 
jquery php實現贊，踩功能
實現贊，踩功能需要的一些需求 1.記錄使用者的ip，根據ip判斷使用者的投票行為是否有效 2.需要兩張表，一張是統計贊和踩的數量的，一張是記錄贊或踩過的使用者ip的 3.頁面載入完成需要顯示的贊和踩的資料用ajax從服務端獲取，以後每次點讚，點踩也是用ajax從服務端獲取 html 額，因為這個主要...


Vant 實現 上拉載入更多
v model loading finished finished immediate check false finished text 沒有更多了 load onload offset 10 itemlist換成你自己的資料 for item in itemlist key item.id va...


Vant 實現 上拉載入更多
vant 的list 元件 預設支援 瀑布流滾動載入。官方的示例是用定時器模擬的資料。我們在專案實戰中，肯定是結合ajax請求處理的。那麼我們該如何實現這個效果呢？vant 的 list元件 使用方法這裡就不詳細說明了，官方文件已經寫的很詳細了。直接上專案中的實戰 template div van ...