小卡片左右滑動的實現

jsbintask 發布于2019-08-29 15:14 / 3483人閱讀

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

背景

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

在實現過程中遇到了如下問題：

卡片角標實現

邊距問題

安卓手機適配問題

翻頁問題

角標實現

角標及文字可以采用絕對定位和css3的rotate來實現，注意點是在父元素上要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;
    }

邊距問題

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


        
          
          
            
            {{item.title}}
            
            {{item.text}}

適配問題

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

transform: translate3d(0,0,0);

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

翻頁問題

效果類似輪播圖，只是需要在小卡片上進行上下輪播，這里采用的絕對定位+animation來實現的，需要注意的是分段時間的把控，在到達時間的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;
    }

云服務器 GPU云服務器左右滑動的導航左右滑動 javascript左右滑動 js屏幕左右滑動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113189.html

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

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

rollback 2019-08-30 15:54 評論0 收藏0
如何做活動頁面的滾動動畫？讓用戶體驗MAX的demo在這里！

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

gaara 2019-08-02 13:56 評論0 收藏0
如何做活動頁面的滾動動畫？讓用戶體驗MAX的demo在這里！

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

timger 2019-04-23 11:57 評論0 收藏0