小卡片左右滑动的实现

时间：2023-03-31 00:38:59 CSS

小卡片左右滑动的实现角标和文字可以使用绝对定位和css3旋转来实现。注意点是在父元素上溢出：hidden.recomm-item-sup{position:absolute;/*背景色：海蓝宝石色；*/颜色：#fff；字体大小：9px；高度：34px；宽度：46px；行高：58px；左：45px；顶部：-12px；：隐藏；文本溢出：省略号；空白：nowrap；}保证金问题。这列卡片在初始化时距离手机左侧有一段距离，但可以整体滑到手机左侧。这个点卡了一会儿。其实就是给第一张卡设置一个margin-left；最后一张卡片距离手机最右边也有margin，但是此时设置margin-right是无效的，最右边的卡片会靠近屏幕边缘，我的解决办法是再写一张卡片在卡片右侧，设置这张卡片的宽度为1px，内容为空，那么刚才的margin-right是有效的。{{item.title}}

适配问题有涉及两个适配问题：1.卡片的界面数据全部读取渲染完成后，卡片完美呈现，在iOS上滑动也很流畅，但是当滑动速度快的时候，在Android上就会出现问题，刷的太快会导致卡片刚滑出变成一块白板，卡片上的图片和文字会消失。原因是浏览器的渲染引擎太慢了。解决办法是给ul加上transform：translate3d(0,0,0);这行代码会触发硬件加速，使用GPU渲染页面。速度再快，也不会有问题。2、由于使用了overflow:scoll，当卡片超出屏幕时，可以滚动呈现，但我们不希望出现滚动条。安卓上没有，ios上有。遗憾的是，我没有看到任何设置滚动条不可见的属性。后来发现滚动条一直在ul元素的底部，基本上是贴在底部的，所以解决方法是：把ul的高度设置的比里面li的高度高一点，滚动条，然后设置父元素的uloverflow:hidden为隐藏，OK。翻页问题的效果和轮播类似，只是需要在小卡片上上下旋转。这里采用绝对定位+动画来实现。需要注意分段时间的控制，在到达时间的20%，即将到达bottom:0，直到50%的时间，一直保持在bottom:0，造成静态效果，然后动画滚动。@-webkit-keyframescarouse{0%{bottom:-80px;}20%{bottom:0}50%{bottom:0}75%{bottom:80px;}100%{bottom:80px;}}.recomm-卡罗项目{位置：绝对;-webkit-animation:2.5scarouse无限线性；宽度：72px；高度：80px；左：0；右：0；底部：-80px；;}