vue2+h5横向滑动滚动及指示器样式

实现效果

大长图可以横向滑动滚动，并且滑动到最右边切换指示器

代码实现

实现逻辑：
1.将原有滑动条隐藏，
2.计算滑动盒子的宽度与屏幕宽度的差值，如果与滑动的距离无限接近，那就说明已经滑动到了最右边。
第一个指示器是控制css样式，第二个指示器是滑动效果

<template>
  <div>
    <div class="container">
      <div class="container-item">
       <img src="../../assets/tree.jpg" alt="">
      </div>
    </div>
    <div class="indicator">
        <span :class="{bgcolor:leftColor}" ></span>
        <span :class="{bgcolor:rightColor}"></span>
    </div>
    <!--指示器滑动的效果-->
    <div class="indicator">
        <div class="line"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-page',
  data () {
    return {
      leftColor: true,
      rightColor: false
    }
  },
  mounted () {
    const container = document.getElementsByClassName('container')[0]
    const myWidth = container.scrollWidth - container.clientWidth
    const indicator = document.querySelector('.indicator')
    const line = document.querySelector('.line')
    // console.log(myWidth, '盒子宽度减去屏幕宽度')
    container.addEventListener('scroll', () => {
      const newWidth = myWidth - container.scrollLeft
      // console.log(container.scrollLeft, newWidth, '超出的宽度减去滚动的距离')
      if (newWidth < 1) {
        // 滚动到了最右边
        this.rightColor = true
        this.leftColor = false
        // 滑动效果
        line.style.transform = `translateX(${indicator.scrollWidth - line.scrollWidth}px)`
      }
      if (container.scrollLeft === 0) {
        // 滚动到了最左边
        this.leftColor = true
        this.rightColor = false
        // 滑动效果
        line.style.transform = 'translateX(0px)'
      }
    })
  }
}
</script>

<style>
.container {
    width: 100%;
    height: 348px;
    overflow: scroll;
}
.container::-webkit-scrollbar {
  display: none;
}
.container-item{
  width: 929px;
  height: 100%;
}
.container-item img{
  width: 929px;
  height: 100%;
}
.indicator{
  width:80px;
  height:10px;
  border-radius: 5px;
  background-color: #ccc;
  margin: 20px auto;
  display: flex;
}
span{
  width:40px;
  height:10px;
  border-radius: 5px;
}
.bgcolor{
  background-color: pink;

}
.line{
  width:50px;
  height:10px;
  border-radius: 5px;
  background-color: pink;
  transition:all .3s
}
</style>