实现手淘金刚区类目列表的scroll滑动效果

• 在h5开发的过程中，轮播图下面放个类目的list（产品术语叫金刚区）是电商产品中很常见的布局，以前都是一行或两行排完，但是随着类目越来越多，出现了这么几种设计：1、最后一个类目为查看更多，点击跳转去一个新的页面；2、用swiper包裹，将多个类目当轮播图展示；3、类目scroll可滑动展示。最后一种展现设计方式出现的最晚，也是现在较为主流的展现方式，所以今天我们来实现下。
• 实现的方式：借助better-scroll库
• 实现的难点就是一个：对滚动条的处理
• 先看看手淘的效果：
  

（1）介绍

• better-scroll库是一个很优秀的库，在作者2.0的版本中，我们实现一个基本的滚动只需引入它的核心滚动，体积也很小。更多可以去官网看看。

（2）安装

$ npm install @better-scroll/core@next --save

（1）实现效果其实很简单，利用better-scroll暴露出的两个特性、translateX、Math对象

• maxScrollX：最大横向滚动位置，也就是整个宽度的大小，offsetLeft的感觉。
• scroll：监听scroll的方法，告诉你滚到哪里了。
• translateX：定义X轴的值，这里我们用百分比。
• Math.abs：将负数转为正数

（2）用better-scroll提供的方法计算出目前列表滚动位置占整个宽度的百分比比，然后赋予translateX，就可以实现两者实时的同步滚动了。代码：

.home-category {
  .scroll-wrapper {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  .scroll-content {
    display: inline-block;
    .scroll-item {
      // box-sizing: content-box;
      height: 50px;
      font-size: 24px;
      display: inline-block;
      text-align: center;
      background: red;
      padding: 0 32px;
      line-height: 50px;
      margin: 0 10px;
      .text {
 width: 88px;
      }
    }
  }
  .dot-wrapper {
    width: 80px;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;
    .dot {
      box-sizing: border-box;
      width: 40px;
      height: 4px;
      background: #f96c1d;
      transition: all 0.4s linear;
    }
  }
}