<xmp id="0c8o0">
  • <nav id="0c8o0"><code id="0c8o0"></code></nav>
    <menu id="0c8o0"><tt id="0c8o0"></tt></menu>

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

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

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

    效果圖奉上

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

    原理:拖動面板沿軸移動來實現瀏覽,結束面板拖動時,如果面板離開檔板,將會移動(反彈)回合適的位置。

    設計步驟

    1、設計好基本元件

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

    2、編輯面板中的內容

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

    3、將內容轉換為動態面板

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

    4、創建檔板

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

    5、設置瀏覽區域面板的交互,從何實現內容面板的滾動瀏覽

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

    6、設置瀏覽區域面板的交互,從何實現內容面板的觸頂反彈

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

    7、設置瀏覽區域面板的交互,從何實現內容面板的觸底反彈

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

    Axure教程:以微信為例,模擬內容的滾動瀏覽并觸底反彈效果

    8、到這,已經全部設置好了,點擊預覽看看效果吧。

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

    本文為@運營喵原創,運營喵專欄作者。

    (0)
    運營喵運營喵官方
    上一篇 2018-08-22 14:44
    下一篇 2018-08-24 15:42

    發表回復

    登錄后才能評論
    公眾號
    公眾號
    返回頂部
    運營喵VIP會員,暢學全部課程,點擊查看 >
    央视频直播在线直播