Axure教程：以微信為例，模擬內(nèi)容的滾動瀏覽并觸底反彈效果

13 評論 6695 瀏覽 22 收藏 4 分鐘

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

效果圖奉上

原理：拖動面板沿軸移動來實現(xiàn)瀏覽，結(jié)束面板拖動時，如果面板離開檔板，將會移動（反彈）回合適的位置。

設(shè)計步驟

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

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

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

4、創(chuàng)建檔板

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

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

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

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

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

 

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

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

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
萍萍仔
9篇作品 94910總閱讀量
06-308337 瀏覽
決策：產(chǎn)品經(jīng)理的取舍之道
10-072891 瀏覽
打工人的八天假，比上班還累
11-163109 瀏覽
3500字拆解呷哺呷哺會員運營：“付費會員”成餐飲新趨勢？
11-303667 瀏覽
投資型打工——近期我對工作的故事和思考
02-141924 瀏覽
能吆喝但不賣座，小紅書能玩明白旅游電商么？
評論
評論請登錄

  1. 啦

    回復(fù)

  2. 請問那個超出內(nèi)容區(qū)域的內(nèi)容需要加到內(nèi)容的動態(tài)面板中嗎？

    來自廣東 回復(fù)

    1. 嗯嗯，要的哈

      來自廣東 回復(fù)

  3. 有些沒能實現(xiàn)，不太會，還需學(xué)習(xí)

    來自云南 回復(fù)

    1. 加油，不會的話再回頭重做一次，看看自己漏了哪一步

      來自廣東 回復(fù)

    2. 完成了，有些設(shè)置名稱略有不同，不過是完成了，受教

      來自云南 回復(fù)

  4. 沒有延Y軸移動啊

    來自云南 回復(fù)

    1. 下拉可以找到沿y軸移動的選項的

      來自廣東 回復(fù)

    2. 就是垂直移動

      來自廣東 回復(fù)

    3. 嗯嗯，可能大家漢化的版本不一樣，所以會導(dǎo)致有一些用例的名稱會稍有不同。 ??

      來自廣東 回復(fù)

  5. 復(fù)雜化了，而且滾動效果壓根就可以不用命令或者函數(shù)就可以實現(xiàn)

    來自廣東 回復(fù)

    1. 如果不用拖動面板的方式實現(xiàn)滾動瀏覽，是不能做出觸底反彈的效果的。你說的不用命令或函數(shù)實現(xiàn)的滾動效果是不是為動態(tài)面板添加滾動欄，但是滾動欄的話實現(xiàn)不了觸底反彈，而且需要遮擋滾動欄，不然就會很丑，交互體驗不是很好

      來自廣東 回復(fù)