成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小卡片左右滑動的實現(xiàn)

jsbintask / 3499人閱讀

摘要：副卡只為最右測卡片適配問題適配問題涉及到了兩個卡片的接口數(shù)據(jù)全部讀完并渲染完成后，卡片完美呈現(xiàn)，上的滑動也很流暢，但是當滑動的速度很快的時候，安卓上就有問題了，滑動速度過快會導致剛滑出來的卡片變成白板，卡片上的圖片和文字都不見了。

背景

項目需求，要實現(xiàn)卡片左右滑動的功能，類似這樣：

在實現(xiàn)過程中遇到了如下問題：

卡片角標實現(xiàn)

邊距問題

安卓手機適配問題

翻頁問題

角標實現(xiàn)

角標及文字可以采用絕對定位和css3的rotate來實現(xiàn)，注意點是在父元素上要overflow：hidden

.recomm-item-sup{
      position: absolute;
      /*background-color: aquamarine;*/
      color: #fff;
      font-size: 9px;
      height: 34px;
      width: 46px;
      line-height: 58px;
      left: 45px;
      top: -12px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
邊距問題

這一列卡片初始化時距離手機左邊是有一段距離的，但是整體可以滑動到手機最左側(cè)，這一點卡了一點時間，其實就是給第一個卡片設(shè)一個margin-left而已；最后一個卡片距離手機最右側(cè)也有邊距，但這時候設(shè)置margin-right是無效的，此時最右測的卡片會緊貼著屏幕邊緣，我的解決辦法是在卡片的右側(cè)再寫一項卡片，設(shè)置這個卡片的寬度是1px，內(nèi)容為空，這時剛剛的margin-right就有效了。

    
        
  • 
          
          
    
            
            
    {{item.title}}
    
            
            
    {{item.text}}
    
          
    
        
    • 
        
  •
適配問題

適配問題涉及到了兩個：
1.卡片的接口數(shù)據(jù)全部讀完并渲染完成后，卡片完美呈現(xiàn)，ios上的滑動也很流暢，但是當滑動的速度很快的時候，安卓上就有問題了，滑動速度過快會導致剛滑出來的卡片變成白板，卡片上的圖片和文字都不見了。原因是瀏覽器的渲染引擎太慢，解決辦法是給ul添加

transform: translate3d(0,0,0);

這一行代碼會觸發(fā)硬件加速，使用GPU來渲染頁面。速度再快也不會有問題了
2.由于采用了overflow：scoll，當卡片多出屏幕時可以滾動呈現(xiàn)，但我們并不希望出現(xiàn)滾動條。在安卓上確實沒有，但ios上卻是有的?？上У氖俏也]有看到有啥屬性可以設(shè)置滾動條不可見。
后來發(fā)現(xiàn)滾動條永遠在ul元素的最下面，基本貼在bottom上，所以解決辦法是：將ul的高度設(shè)高一點，使之超過里面li的高度和滾動條的高度，然后設(shè)置ul的父元素overflow：hidden來隱藏掉，OK。

翻頁問題

效果類似輪播圖，只是需要在小卡片上進行上下輪播，這里采用的絕對定位+animation來實現(xiàn)的，需要注意的是分段時間的把控，在到達時間的20%的時候，就要到達bottom：0，至時間的50%，一直維持在bottom：0，造成一種靜止效果，然后再進行動畫滾動。

@-webkit-keyframes carouse{
    0%{bottom:-80px;}
    20%{bottom:0}
    50%{bottom:0}
    75%{bottom:80px;}
    100%{bottom:80px;}
  }
.recomm-caro-item{
      position: absolute;
      -webkit-animation:2.5s carouse infinite linear;
      width: 72px;
      height: 80px;
      left: 0;
      right: 0;
      bottom: -80px;
      background: #22ba66;
      border-radius: 5px;
    }

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113189.html

相關(guān)文章

  • 如何做活動頁面的滾動動畫？讓用戶體驗MAX的demo在這里！

    摘要：此時需要判斷當前位置是否大于或者小于，若超過這個極限值需要重設(shè)目標位移及幀位移，使其在極限值內(nèi)。判斷第二次滑動是否與第一次不同方向，若不同向需重置上次幀位移為。以免上次幀位移太大影響移動方向。 本文由云+社區(qū)發(fā)表 最近的一個活動頁面需要做一個可以左右滑動的抽簽效果，故通過用css的transform屬性和js結(jié)合來模擬可以無限滾動的效果。 先上效果： showImg(https://s...

    rollback 評論0 收藏0

  • 如何做活動頁面的滾動動畫？讓用戶體驗MAX的demo在這里！

    摘要：此時需要判斷當前位置是否大于或者小于，若超過這個極限值需要重設(shè)目標位移及幀位移，使其在極限值內(nèi)。判斷第二次滑動是否與第一次不同方向，若不同向需重置上次幀位移為。以免上次幀位移太大影響移動方向。 本文由云+社區(qū)發(fā)表 最近的一個活動頁面需要做一個可以左右滑動的抽簽效果，故通過用css的transform屬性和js結(jié)合來模擬可以無限滾動的效果。 先上效果： showImg(https://s...

    gaara 評論0 收藏0

  • 如何做活動頁面的滾動動畫？讓用戶體驗MAX的demo在這里！

    摘要：此時需要判斷當前位置是否大于或者小于，若超過這個極限值需要重設(shè)目標位移及幀位移，使其在極限值內(nèi)。判斷第二次滑動是否與第一次不同方向，若不同向需重置上次幀位移為。以免上次幀位移太大影響移動方向。 本文由云+社區(qū)發(fā)表 最近的一個活動頁面需要做一個可以左右滑動的抽簽效果，故通過用css的transform屬性和js結(jié)合來模擬可以無限滾動的效果。 先上效果： demo地址：https://kir...

    timger 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<