js點選載入更多可以增加幾條資料的顯示

2022-08-31 13:39:06 字數 2002 閱讀 6692

<

div

class

="list"

>

<

div

class

="one"

>

<

div

class

="img"

>

<

img

src="../img/b6c.png"

/>

div>

<

div

class

="infor"

>

<

p class

="detail"

>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

p>

<

p class

="time"

>2018-6-28

p>

div>

div>

<

div

class

="one"

>

<

div

class

="img"

>

<

img

src="../img/lunbo3.png"

/>

div>

<

div

class

="infor"

>

<

p class

="detail"

>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊

p>

<

p class

="time"

>2018-6-28

p>

div>

div>

div>

<

div

class

="more"

>載入更多

div>

在乙個專案中,需要點選更多,之後顯示更多的資料,不是獲取當前的頁面的高度自動載入的 所以算不上懶載入,是js控制的

上面是一些頁面的**
下面是css樣式

.newcenter .detail .list .newcenter .detail .list .one .newcenter .detail .list .one .img .newcenter .detail .list .one .img img .newcenter .detail .list .one .infor .newcenter .detail .list .one .infor .detail .newcenter .detail .list .one .infor .detail .newcenter .detail .list .one .infor .time .newcenter .more

具體的js的如下:

var arr = $('.detail .list .one').length;    //

新聞的長度

var textarr =; //

新聞列表資訊

var arr =; //

每次顯示的內容

var num = 1; //

點選次數

//獲取新聞列表資訊

$('.detail .list .one').each(function

(index))

//初始化顯示的幾條新聞資訊

for(var i = 0; i<3;i++)

//頁面初始化渲染

$('.detail .list').html(arr);

//點選載入更多

$('#more').click(function

()else

}$('.detail .list').html(arr);

})

職場小白,有不正確的或者有更多的可以提意見 耶

點選載入更多內容

基本原理 頁面載入時,向後台請求資料,php通過查詢資料庫將最新的幾條記錄顯示在列表頁,在列表頁的底部有個 更多 鏈結,通過觸發該鏈結,向服務端傳送ajax請求,後台php程式得到請求引數,並作出相應,獲取資料庫相應的記錄並以json的形式返回給前台頁面,前台頁面jquery解析json資料,並將資...

js點選更多顯示更多內容效果

我寫了乙個簡單的分段顯示外掛程式,用法很簡單 1,把你要分面顯示的內容的容器元素增加乙個class showmorenchildren,並增加乙個自定義屬性pagesize 8 這種 這個pagesizie有乙個預設值10。可以不寫 如 ul class showmorenchildren page...

js上拉載入更多

方法一 jq var page 1,分頁碼 off on false,分頁開關 滾動載入方法 1 中用的 timers null 定時器 滾動載入方法 2 中用的 載入資料 var loadingdatafn function off on true 重要 這是使用了 時 用到的 如果用 滾動載入方...