無(wú)論是APP還是網(wǎng)站，上下縱向?yàn)g覽或者左右橫向?yàn)g覽是非常常見(jiàn)的，除此之外，大家肯定也都注意到了一種情況一種現(xiàn)象：當(dāng)內(nèi)容瀏覽到底部時(shí)，繼續(xù)下拉頁(yè)面會(huì)出現(xiàn)觸底反彈，頂部也是如此。今天我們以微信聊天記錄為例，一起來(lái)探索這種瀏覽方式的實(shí)現(xiàn)方法。

效果圖奉上

原理：拖動(dòng)面板沿軸移動(dòng)來(lái)實(shí)現(xiàn)瀏覽，結(jié)束面板拖動(dòng)時(shí)，如果面板離開(kāi)檔板，將會(huì)移動(dòng)（反彈）回合適的位置。

設(shè)計(jì)步驟

1、設(shè)計(jì)好基本元件

2、編輯面板中的內(nèi)容

3、將內(nèi)容轉(zhuǎn)換為動(dòng)態(tài)面板

4、創(chuàng)建檔板

5、設(shè)置瀏覽區(qū)域面板的交互，從何實(shí)現(xiàn)內(nèi)容面板的滾動(dòng)瀏覽

6、設(shè)置瀏覽區(qū)域面板的交互，從何實(shí)現(xiàn)內(nèi)容面板的觸頂反彈

7、設(shè)置瀏覽區(qū)域面板的交互，從何實(shí)現(xiàn)內(nèi)容面板的觸底反彈

8、到這，已經(jīng)全部設(shè)置好了，點(diǎn)擊預(yù)覽看看效果吧。

是不是成功啦，哈哈，恭喜，又比以前的你厲害了一點(diǎn)。

本文由 @萍萍仔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pixabay，基于 CC0 協(xié)議