iT邦幫忙

1

社群軟體的網頁動態顯示法呈現請益

  • 分享至 

  • xImage

各位前輩好,最近在寫ASP.NET網站也發了許多相關的問題,也非常感謝各位專業的前輩願意給予解答
這次又有個問題想請教各位
我是一個挺常使用FB的一個社群使用者
最近在開發網頁時我覺得FB.IG.Twitter這些社群的動態顯示方式我覺得非常實用
可是想要找相關的設計方式時跳出來的都是「平面設計」類型的教學,沒辦法得到需要的資訊
因此想來請教各位前輩們像是設些社群軟體在首頁時每次往下滑會出現新的資料嵌入網站內的方式如何設計
範例:
資料庫有
id
1
2
3
4
5
.
.
.
的資料
我希望讓他們在網頁往下滑到第一個文章出現的一半時會出現新的內容新增在下方以此類推
這對我而言是一個新的思維可能問題有點笨也麻煩各位指教
感謝

天黑 iT邦研究生 5 級 ‧ 2022-12-26 14:53:54 檢舉
原理大概是計算瀏覽器的捲動軸到某個位置,呼叫api取得接下來的資料使用append插到最下面,重覆這機制,如果是mvc 可以用 return partial view
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
4
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2022-12-23 12:55:50
最佳解答

關鍵字「瀑布流」「延遲載入」

這會需搭配AJAX來處理。建議用VUE之類框架來處理,會比較容易些。

player iT邦大師 1 級 ‧ 2022-12-23 13:10:09 檢舉

用jQuery 接 scroll 事件
自己判斷要不要ajax抓資料回來顯示
也可以啦

最後透過瀑布流跟延遲載入的方式成功做出來了!

2
科科
iT邦好手 8 級 ‧ 2022-12-23 12:26:47

你要的應該是分頁做成"無限滾動"?
給你關鍵字了,你google看看

我非專業前端,只能給你這個方向了~

2
poison3804
iT邦新手 4 級 ‧ 2022-12-23 13:49:38

這個其實不難,當你前端有切好版,
剩下的就只是在特定的觸發條件下使用非同步去載入你的資料進來而已,
會用ajax的話,其實就做得出來了。

建議你可以先把功能化簡,從簡單的開始,
例如一開始只有載入10筆資料,當你按下一個按鈕的時候,
可以再往下載入10筆,當你這個成功之後,
就可以開始改寫你的觸發條件,從原本按下按鈕變成網頁下拉時載入而已。

我要發表回答

立即登入回答