Vue 实现滚动滑块功能

实现效果

image.png

ScrollProgress组件

<template>
  <div class="flex justify-center items-center w-full mb-12">
    <div ref="progress" class="w-45 h-4 bg-gray-300 rounded-2 relative">
      <div ref="progressPivot" class="h-full w-11 bg-dgray rounded-2 absolute"></div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
      progress: {
        type: Number,
        default: 0
      },
      progressWidth: {
        type: Number,
        default: 45
      },
      progressHeight: {
        type: Number,
        default: 4
      },
      pivotWidth: {
        type: Number,
        default: 11
      },
    },
    watch: {
      progress(value) {
        this.$refs.progressPivot.style.left = (this.progressWidth - this.pivotWidth) * value + 'px'
      }
    },
    mounted() {
      this.$refs.progress.style.height = this.progressHeight + 'px'
      this.$refs.progress.style.width = this.progressWidth + 'px'
      this.$refs.progressPivot.style.width = this.pivotWidth + 'px'
    },
  }
</script>

使用示例

<!-- scrollView内容 -->
<div ref="scrollView" class="overflow-x-scroll w-100">
  <div v-for="(i, index) in list" :key="index" class="text-12 w-70 mr-8">
    {{i}}
  </div>
</div>

<!--进度条 -->
<scroll-progress :progress="progress" />

import ScrollProgress from '@/components/ScrollProgress'

components: {
 ScrollProgress
},
<!-- 监听数据列表，网络请求结束后显示列表才能获取到scrollView -->
watch: {
 list() {
   this.$nextTick(() => {
     let scrollView = this.$refs.scrollView;
     if (!scrollView) return
     scrollView.addEventListener("scroll", this.scroll, false);
   })
 }
},
methods: {
    scroll(e) {
       let leftViewOffset = e.target.scrollLeft;
       let contentW = e.target.scrollWidth-e.target.clientWidth
       this.progress = leftViewOffset/contentW
    },
}

使用时导入css样式即可 tailwindcss