巢狀滾動效果實現討論

2021-09-12 12:32:37 字數 1500 閱讀 5420

而且絕大多數的文章都是從如何解決手勢衝突出發給出相應的解決方案,原因是他們大多數都採用了** scrollview 的解決方案,如下圖

可以看到** scrollview 和 一級 scrollview都需要在縱向滾動,所以重點要解決的就是這裡的滾動衝突,具體的細節我就不再贅述,大家還可以參考hgpersonalcenter這個專案,裡面有詳細的注釋。

從整體結構上來看即刻只有二級 scrollview,所以在縱向上 childscrollview 會完全接管手勢,橫向滾動時又由 mainscrollview 控制,這樣子帶來的好處在於無需關心手勢衝突問題,但要實現前面提到的效果還必須處理是以下問題:

前面提到的即刻和抖音採用的都是這種二級 scrollview 的方案,但即刻在體驗上更好,比如抖音的個人主頁如果手指開始滾動的地方有可互動的控制項(tab欄),那麼這時候滑動是會失效的,還有在切換tab後將檢視下拉滾動到頂部然後返回到之前的tab頁,抖音是直接返回到了原始的位置而即刻還是能保留之前進度。

頭部滾動失效解決方案

即刻為了達到完美的效果,在每個 childscrollview 頂部都新增了 headerview 和 menuview,這樣子作為乙個整體,即使開始觸控的地方有可互動控制項也可以上下滾動。然後在左右滑動的時又讓childscrollview 內的 headerview 和 menuview 隱藏,當停止滾動的時讓原本在外層 scrollview 內的 headerview 和 menuview 顯示。

保留進度解決方案

關於保留進度首先要做的就是判斷當前 childscrollview 是不是處於一種特殊狀態,這種狀態就是 offset.y的值是否大於 headerview 的偏移量,然後再通過判斷 childscrollview 當前的滾動方向,來決定是否要調整 headerview 和 menuview 的位置。

對比兩個方案最終的實現各有優缺點

方案一優點:

缺點:方案二

優點: 缺點

這裡要提的是,由於方案二中 mainscrollview 並不會在縱向有滾動,所以下拉重新整理必須放在 childviewcontroller 內實現,但又因為 headerview 和 menuview 需要根據 childscrollview 的偏移而移動,在配合mjrefresh時它們的偏移有明顯的bug(在本文發布前我並沒深究解決方案),或許即刻也是因為這個原因而採用上面提到的解決辦法。

上面兩個解決方案中的 menuview 都設計成了交由開發者實現,因為即使整合各種樣式的也難滿足設計上的千奇百怪的要求,參考我的demo就能很快實現乙個自己想要的效果。

滾動切換tab樣式的效果實現

效果大致描述 滑鼠滾動或者點選指定的tab時,相應的tab標籤樣式改變,另外四個樣式恢復預設,同時相應的內容顯示到可視區域。思路 獲取頁面或者層的滾動高度,以及頁面內容每一部分的高度,當滾動時用js判斷高度之間的關係,從而為指定tab賦予樣式。而點選的效果可以用 使用標籤來做tab,頁面每部分用指定...

名片效果實現

模仿qq空間 微博等滑鼠懸浮在人名上時,顯示使用者詳細資訊 大體思路是將名片卡隱藏在頁面中,當懸浮時將名片卡移動到滑鼠邊,滑鼠移開時隱藏名片卡。本文的js使用了jquery 使用者名稱跟名片卡 如下 只是為了顯示類名,具體內容按需補充 使用者名稱 js 如下 var showmsgcardcontr...

抽屜效果實現

import viewcontroller.h define maxy 60 inte ce viewcontroller property nonatomic,weak uiview mainview property nonatomic,weak uiview leftview property...