vue实现卡片式上下滑动_小卡片左右滑动的实现

背景

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

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

卡片角标实现

边距问题

安卓手机适配问题

翻页问题

角标实现

角标及文字可以采用绝对定位和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是无效的，此时最右测的卡片会紧贴着屏幕边缘，我的解决办法是在卡片的右侧再写一项卡片