我也不知道这种css效果的专业术语是什么，就如标题这么叫吧。。。

1、前言

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

手淘

2、BetterScroll

（1）介绍

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

（2）安装

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

3、实现

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

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

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

<template>  <div class="home-category">    <div class="scroll-wrapper" ref="scroll">      <div class="scroll-content" ref="test">        <div class="scroll-item" v-for="(item, index) in cateList" :key="index">          <p class="text">{{item}}</p>        </div>      </div>    </div>    <div class="dot-wrapper">      <div class="dot" :style="{'transform': `translateX(${rate})`}"></div>    </div>  </div></template><script>import BScroll from '@better-scroll/core';export default {  data() {    return {      rate: 0,      cateList: [1, 2, 3, 4, 5, 6, 7],    };  },  mounted() {    this.init();  },  beforeDestroy() {    this.bs.destroy();  },  methods: {    init() {      this.bs = new BScroll(this.$refs.scroll, {        scrollX: true,        click: true,        probeType: 3, // listening scroll hook      });      const totalX = Math.abs(this.bs.maxScrollX);      this._registerHooks(['scroll'], (pos) => {        const currentX = Math.abs(pos.x);        this.rate = `${Number((currentX / totalX) * 100).toFixed(2)}%`;      });    },    _registerHooks(hookNames, handler) {      hookNames.forEach((name) => {        this.bs.on(name, handler);      });    },  },};</script><style lang="scss" scoped>.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;    }  }}</style>

4、其他

• 最后看看我们的实现效果（大致框架就是如此，效果自由发挥吧）：
  

  效果
• 你可能感兴趣：
  Ewall的简书
  vscode+eslint让你编程快到飞起
  手把手教你用vue+node+mongodb搭建一个小商场
  小程序的因难见巧
  看完你就该会git了
  CSS日常踩坑后的总结

原著是一个有趣的人,若有侵权,请通知删除