前端常用插件（vue-custom-scrollbar）热力图

有时候可能要自定义滚动条样式，咋，你还不会自定义滚动条！！！

前提：安装了vue-custom-scrollbar

yarn add vue-custom-scrollbar
// or
npm i vue-custom-scrollbar

展示

1、结构

<template>
  <div class="scroll">
    <vue-custom-scrollbar class="scroll-area" :settings="settings">
      <div class="scroll__map" ref="map">
        <!-- 地图 -->
        <img
          ref="img"
          src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0ee46a84dd1d437494c6f2529dd0f454~tplv-k3u1fbpfcp-watermark.image"
          alt=""
          class="scroll__map--img"
        />
        <!-- 闪烁部分，这里可以根据需要进行循环生成多个地点，只需改变地点的位置 -->
        <div class="flash">
          <!-- 地点信息 -->
          <div class="flash__info" v-show="address0">
            <img
              class="flash__info--img"
              src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/60e0b45382ba4e62a030eb99b272ada2~tplv-k3u1fbpfcp-watermark.image"
              alt=""
            />
            <span> 美国</span>
            <span class="flash__info--triangle"></span>
          </div>
          <!-- 发光点 -->
          <div class="flash__dot" @click="address0 = !address0">
            <div class="flash__dot--item">
              <span class="dots circle01"></span>
              <span class=" dots circle02"></span>
            </div>
          </div>
        </div>
      </div>
    </vue-custom-scrollbar>
  </div>
</template>

2、js

import vueCustomScrollbar from "vue-custom-scrollbar";
import "vue-custom-scrollbar/dist/vueScrollbar.css";
export default {
  components: { vueCustomScrollbar },
  data() {
    return {
      //点击地点是否展示信息
      address0: false,
      //自定义滚动条配置
      settings: {
        suppressScrollY: false,
        suppressScrollX: false,
        wheelPropagation: false
      }
    };
  }
};

3、样式

有些样式其实不用写那么多，如果有用第三方组件库，可以写的很少（根据情况，这里是手写的所有）

<style lang="less" scoped>
.scroll {
  margin: 0 auto;
  width: 375px;
  box-sizing: border-box;
  padding-top: 58px;
  margin-top: 40px;
  height: 640px;
  background-image: url("https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f543e1d73be84bfc9b79b7ebe20acc89~tplv-k3u1fbpfcp-watermark.image");
  background-size: 100% auto, 100% 100%;
  background-repeat: no-repeat;
  background-position: center 0, center;
  overflow: hidden;
  &__map {
    margin-top: 26px;
    overflow: scroll;
    width: 864px;
    position: relative;
    &--img {
      width: 864px;
    }
    &::-webkit-scrollbar {
      display: none;
    }

    // 地点
    .flash {
      position: absolute;
      top: 100px;
      left: 100px;
      // 对应地点点击时的样式
      &__info {
        position: absolute;
        top: -50px;
        left: -50%;
        min-width: 85px;
        transform: translateX(-47%);
        background: #ffffff;
        box-shadow: 0px 10px 20px 0px rgba(7, 15, 31, 0.36);
        padding: 8px;
        box-sizing: border-box;
        font-size: 14px;
        color: #393f4f;
        border-radius: 4px;
        &--img {
          margin-right: 8px;
          width: 26px;
          vertical-align: middle;
        }
        &--triangle {
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-30%);
          border: 5px solid #fff;
          border-color: #fff transparent transparent transparent;
        }
      }
      &__dot {
        position: absolute;
        width: 8px;
        height: 8px;
        background: #33d0ff;
        border-radius: 50%;
        z-index: 999;
        &--item {
          width: 24px;
          min-width: 24px;
          height: 24px;
          position: absolute;
          left: -8px;
          top: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          pointer-events: none;
          .dots {
            content: "";
            display: block;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: rgba(51, 120, 255, 0.1);
            border: 1px solid rgba(51, 120, 255, 0.2);
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            opacity: 0;
            right: 0;
            margin: auto;
            &.circle01 {
              animation: circle 1s linear infinite;
            }
            &.circle02 {
              animation: circle 1s linear infinite;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less">
//地图动画
@keyframes circle {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.9;
  }
  70% {
    -webkit-transform: scale(2.8);
    transform: scale(2.8);
    opacity: 0.8;
  }
  80% {
    -webkit-transform: scale(3);
    transform: scale(3);
    opacity: 0.7;
  }
  90% {
    -webkit-transform: scale(3.2);
    transform: scale(3.2);
    opacity: 0.6;
  }
  100% {
    -webkit-transform: scale(3.2);
    transform: scale(3.2);
    opacity: 0;
  }
}
// 自定义滚动条
.scroll-area {
  // 整个滚动条的样式
  .ps__rail-x {
    width: 323px !important;
    margin-left: 26px;
    margin-right: 26px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    // 滚动点的样式
    .ps__thumb-x {
      height: 4px;
      background: rgba(255, 255, 255, 1);
      border-radius: 2px;
    }
  }
}
.ps .ps__rail-x:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}
.ps:hover > .ps__rail-x {
  opacity: 1;
}
.ps__rail-x {
  opacity: 1;
}
.ps .ps__rail-x.ps--clicking {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}
</style>