彈性布局實現滑動內容放大,且放大部分不會被隱藏掉

2022-01-13 06:42:57 字數 489 閱讀 3381

乙個小demo,可以看到,第乙個li放大後,仍然是垂直居中,且沒有被外層滑動盒子的overflow:auto屬性給影響到的(實質上這是因為flex布局+不限定高度來實現的);如圖

,另外,如果你需要所有li底部對齊,則需要給放大的那個盒子加上transfrom屬性,數值大小視情況而定,並且還要對滑動盒子或者ul加上乙個padding屬性,以便留出位移空間從而保證位移的li能夠顯示完全。

那麼這樣的樣式適用於哪種場景呢?

其實這就是乙個焦點放大特效的乙個變形。當然,有很多類似特效的實現方式是在滑動盒子上加一層蒙版,或者其他的處理方式,但是不能解決放大後內容超出部分的顯示處理,然後將焦點圖放到蒙版中,如swiper外掛程式的第39個demo:

雙擊放大前,

雙擊放大後

一對比就知道之間的區別在**了,這個小demo適用於左右滑動+點選放大的需求效果。

寫出來分享給大家,希望對有需要的童鞋提供一點幫助

實現彈性滑動

方式之一 scroller 在乙個自定義的view中實現smoothscrollto和 computescroll 即可。整個過程可形容為 由scroller要求view隔一段時間重畫一次子view,讓其滑動。並重複這個過程直到滑動時間結束。過程為view 依次執行startscroll inval...

使用Scoller實現彈性滑動

scroller scroller new scroller mcontext 緩慢滾動到指定位置 private voidsmoothscrollto int destx,int desty int scrollx getscrollx int deltax destx scrollx 1000m...

使用延時策略實現彈性滑動

延時策略。它的核心思想是通過傳送一系列延時訊息從而打到一種漸進式的效果 採用handler的乙個例項。功能 大約1000ms內將view的內容向左移動100px.private static final int message scroll to 1 private static final int...