小卡片左右滑動的實現

背景

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

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

1. 卡片角標實現
2. 邊距問題
3. 安卓手機適配問題
4. 翻頁問題

角標實現

角標及文字能夠採用絕對定位和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就有效了。

<ul class="recom-ul">
        <li class="recomm-item" v-for="(item,index) in slaveButtonListObj.slaveButtonList" v-if="item.isVisible ==1" v-on:click="btnEvent(index)">
          <!--副卡-->
          <div class="recomm-item-con" v-if="item.isHot == 0">
            <img v-if="item.tipIcon && item.title" class="recomm-tip-icon" :src="item.tipIcon" alt="">
            <div v-if="item.tipIcon && item.title" class="recomm-item-sup">{{item.title}}</div>
            <img class="rec-img" :src="item.icon">
            <div class="recomm-item-title">{{item.text}}</div>
          </div>
        </li>
        <li class="recomm-item-visible"></li><!--只爲最右測卡片-->
      </ul>

適配問題

適配問題涉及到了兩個：
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;
    }