背景

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

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

卡片角标实现

边距问题

安卓手机适配问题

翻页问题

角标实现

角标及文字可以采用绝对定位和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;

}