實現手淘金剛區類目列表的scroll滑動效果

實現手淘金剛區類目列表的scroll滑動效果，我也不知道這種css效果的專業術語是什麼，就先這麼叫吧。。。

一、前言

• 在h5開發的過程當中，輪播圖下面放個類目的list（產品術語叫金剛區）是電商產品中很常見的佈局，之前都是一行或兩行排完，可是隨着類目愈來愈多，出現了這麼幾種設計：一、最後一個類目爲查看更多，點擊跳轉去一個新的頁面；二、用swiper包裹，將多個類目當輪播圖展現；三、類目scroll可滑動展現。最後一種展示設計方式出現的最晚，也是如今較爲主流的展示方式，因此今天咱們來實現下。
• 實現的方式：藉助better-scroll庫
• 實現的難點就是一個：對滾動條的處理
• 先看看手淘的效果：

二、BetterScroll

（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，就能夠實現二者實時的同步滾動了。代碼：

<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>
複製代碼

四、小結

• 最後看看咱們的實現效果（大體框架就是如此，效果自由發揮吧）：
  

  

• 咱們panda-mall首頁中也使用了這個常見的佈局方式-->首頁分類icon滑動