1 2首頁重新整理以及點選排行

2022-09-23 09:17:08 字數 3203 閱讀 9277

首先完成首頁重新整理的功能

就像下圖一樣能做到滑鼠滑輪一直向下滑,頁面能夠重新整理出來同時不重新整理頁面,新的新聞資料也能載入出來的效果

1、以下是後端的**

1 @index_blue.route("

/news_list")

2def

news_list():3#

接收引數

4 cid = request.args.get("

cid",1)

5 page = request.args.get("

page

",1)

6 per_page = request.args.get("

per_age

",10)7#

檢測異常

8try

:9 cid =int(cid)

10 page =int(page)

11 per_page =int(per_page)

12except

exception as e:

1314

#判斷接收來的cid的值是否等於1

15if cid == 1:16#

在資料庫中查詢新聞並且以建立時間排序,用paginate函式接收

17 paginate =news.query.order_by(news.create_time.desc())\

18 .paginate(page=page,per_page=per_page)

19else:20

#如果不是,就查詢與前端接收到的cid相同的id的新聞

21 paginate = news.query.filter(news.category_id==cid).\

22order_by(news.create_time.desc()).\

23 paginate(page=page,per_page=per_page)

2425

#獲取所有

26 newlist =paginate.items27#

獲取總頁數

28 totalpage =paginate.pages29#

獲取當前頁數

30 currentpage =paginate.page

31 new_newlist =32#

for迴圈遍歷,用to_basic_dict()函式轉換成字典型別

33for new in

newlist:

343536#

傳遞上下文

37 context =

42return jsonify(errno=ret.ok,errmsg="

新聞獲取成功

" ,context=context)

2、下面是js的**

1

var currentcid = 1; //

當前分類 id

2var cur_page = 1; //

當前頁3

var total_page = 1; //

總頁數4

var data_querying = true; //

是否正在向後臺獲取資料:如果為ture表示正在載入資料;反之,沒有載入資料56

7 $(function

() )

19 $(this).addclass('active')

2021

if (clickcid !=currentcid)

30});

3132

//頁面滾動載入相關

33 $(window).scroll(function

() 60}61

}62})63

});64

65function

updatenewsdata() ;

7273 $.get('/news_list', params, function

(response)

8485

for (var i=0;i)

98 } else

101});

102 }

3、然後就是點選排行的設定和** 了

1

<

div

class

="conter_con"

>

2<

ul class

="list_con fl"

>34

ul>

5<

div

class

="rank_con fr"

>

6<

div

class

="rank_title"

>

7<

h3>點選排行

h3>

8div

>

9<

ul class

="rank_list"

>

1011

<

li><

span

class

="}"

>}

span

>

12<

a href

="#"

>}

a>

li>

1314

ul>

15div

>

16div

>

在11行中我們用了重定向,定向了我們自己在tools中建立的do_rank函式,這裡rank是我們用了別名。

1

defdo_rank(index):

2if index == 1:

3return

"first"4

elif index == 2:

5return

"second"6

elif index == 3:

7return

"third"8

else:9

return

""