實(shí)現(xiàn)效果

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內(nèi)容 -->
<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>

<!--進(jìn)度條 -->
<scroll-progress :progress="progress" />

import ScrollProgress from '@/components/ScrollProgress'

components: {
 ScrollProgress
},
<!-- 監(jiān)聽(tīng)數(shù)據(jù)列表，網(wǎng)絡(luò)請(qǐng)求結(jié)束后顯示列表才能獲取到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
    },
}

使用時(shí)導(dǎo)入css樣式即可 tailwindcss