滑动组件

这是很简单的水平滑动特效，纯css实现，主要用到属性是overflow,可以设置超出部分的显示效果来实现我们想要的滑动特效！！另外隐藏掉了浏览器的默认滚动条，经测试浏览器的滚动条大概是17px,所以设置最外层容器比滑动组件部分矮17px,并且给外层容器设置超出部分隐藏，就可以去掉浏览器的默认滚动条了。

 <!--滑动-->
    <div class="row-wrap">
      <div class="row-section-list">
        <div class="row-section-list-item" v-for="item in list">{{item}}</div>

      </div>
    </div>

<!--css部分-->
.row-wrap{
    width: 100%;
    height: 1.5rem;//父盒子设置比子盒子矮至少17px，并且设置超出部分隐藏，可以让页面不出现讨厌的浏览器默认滚动条
    overflow-y: hidden;
    .row-section-list{
      width: 100%;
      height:1.7rem;
      background: #ffddf8;
      margin-top: 0.5rem;
      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;
      padding-bottom: 100px;
      margin-bottom: -100px;
      /* &::-webkit-scrollbar{
         display: none;
       }*/

      .row-section-list-item{
        width: 1.5rem;
        height: 1rem;
        line-height: 1rem;
        border-radius: 0.05rem;
        background: #eb9bc8;
        text-align: center;
        display: inline-block;
        margin-right: 0.2rem;
      }

    }
  }

效果图：

image.png