小卡片左右滑动的实现

jsbintask 发布于2019-08-29 15:14 / 3481人阅读

摘要：副卡只为最右测卡片适配问题适配问题涉及到了两个卡片的接口数据全部读完并渲染完成后，卡片完美呈现，上的滑动也很流畅，但是当滑动的速度很快的时候，安卓上就有问题了，滑动速度过快会导致刚滑出来的卡片变成白板，卡片上的图片和文字都不见了。

背景

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

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

卡片角标实现

边距问题

安卓手机适配问题

翻页问题

角标实现

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

云服务器 GPU云服务器左右滑动的导航左右滑动 javascript左右滑动 js屏幕左右滑动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113189.html

如何做活动页面的滚动动画？让用户体验MAX的demo在这里！

摘要：此时需要判断当前位置是否大于或者小于，若超过这个极限值需要重设目标位移及帧位移，使其在极限值内。判断第二次滑动是否与第一次不同方向，若不同向需重置上次帧位移为。以免上次帧位移太大影响移动方向。本文由云+社区发表最近的一个活动页面需要做一个可以左右滑动的抽签效果，故通过用css的transform属性和js结合来模拟可以无限滚动的效果。先上效果： showImg(https://s...

rollback 2019-08-30 15:54 评论0 收藏0
如何做活动页面的滚动动画？让用户体验MAX的demo在这里！

摘要：此时需要判断当前位置是否大于或者小于，若超过这个极限值需要重设目标位移及帧位移，使其在极限值内。判断第二次滑动是否与第一次不同方向，若不同向需重置上次帧位移为。以免上次帧位移太大影响移动方向。本文由云+社区发表最近的一个活动页面需要做一个可以左右滑动的抽签效果，故通过用css的transform属性和js结合来模拟可以无限滚动的效果。先上效果： showImg(https://s...

gaara 2019-08-02 13:56 评论0 收藏0
如何做活动页面的滚动动画？让用户体验MAX的demo在这里！

摘要：此时需要判断当前位置是否大于或者小于，若超过这个极限值需要重设目标位移及帧位移，使其在极限值内。判断第二次滑动是否与第一次不同方向，若不同向需重置上次帧位移为。以免上次帧位移太大影响移动方向。本文由云+社区发表最近的一个活动页面需要做一个可以左右滑动的抽签效果，故通过用css的transform属性和js结合来模拟可以无限滚动的效果。先上效果： demo地址：https://kir...

timger 2019-04-23 11:57 评论0 收藏0