小卡片左右滑动的实现

背景

项目需求，要实现卡片左右滑动的功能，类似这样：

在实现过程中遇到了如下问题：

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;
    }