Vue 实现滚动滑块功能

实现效果

image.png

ScrollProgress组件

使用示例

  

    {{i}}
  

import ScrollProgress from '@/components/ScrollProgress'

components: {
 ScrollProgress
},

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