vue 自定义指令实现，滚动条百分比进度条。

您可以戳这里查看演示效果

v-progress.js

import "./v-progress.css"; const scrollInit = (dom, opts, progress, progressContent) => { let width = "height"; let scrollTop = dom.scrollTop; let scroll = dom.scrollTop; let top = "top"; progressContent.style.height = "100%"; progressContent.style.width = ((dom.scrollTop / (dom.scrollHeight - dom.clientHeight) * 100) || 0) + "%"; switch (opts.type) { case "top": break; case "bottom": scrollTop = -dom.scrollTop; top = ""; break; case "left": width = "width"; scrollTop = 0; scroll = dom.scrollTop; progressContent.style.width = "100%"; progressContent.style.height = ((dom.scrollTop / (dom.scrollHeight - dom.clientHeight) * 100) || 0) + "%"; break; case "right": width = "width"; scrollTop = 0; scroll = dom.scrollTop; progressContent.style.width = "100%"; progressContent.style.height = ((dom.scrollTop / (dom.scrollHeight - dom.clientHeight) * 100) || 0) + "%"; break; default: width = "height"; } let height = width == "height" ? "width" : "height"; progressContent.style.background = opts.color; progress.style.cssText = `background: ${opts.background}; ${width}: ${opts.width}; ${height}: 100%; ${opts.type}: ${scrollTop}px; ${top}: ${scroll}px;`; } export default { bind(el, binding) { const opts = Object.assign( { color: "#409EFF", //颜色 background: "transparent", // 底部颜色 width: "3px", // 宽度 type: "top", // "top 上 bottom 下 left 左 right 右" }, binding.value ); if (el) { setTimeout(() => { if ( !window.getComputedStyle(el, null).position || window.getComputedStyle(el, null).position == "static" || window.getComputedStyle(el, null).position == "initial" ) { el.style.position = "relative"; } el.style.overflowY = "scroll"; el.style.overflowX = "hidden"; let progress = document.createElement("div"); let progressContent = document.createElement("p"); progress.className = "scroll-progress"; progress.appendChild(progressContent); el.appendChild(progress); scrollInit(el, opts, progress, progressContent); el.onscroll = () => { scrollInit(el, opts, progress, progressContent); } }); } } }; 复制代码

复制代码

index.js

import progress from './v-progress.js' // 添加install方法 const Progress = { install: function (Vue) { Vue.directive("progress", progress) } } // Progress export default Progress 复制代码

v-progress.css

.scroll-progress {
  position: absolute;
  z-index: 99999;
}复制代码

使用案例：

app.vue

<template> <div id="app" v-progress> <div v-progress="{backgroundColor: 'red'}" class="box-a"> <p v-for="(x,i) in 30" :key="i">我是{{i}}</p> </div> <div v-progress="{type: 'bottom', color: 'radial-gradient(#14b9ff, #67C23A)'}" class="box-b"> <p v-for="(x,i) in 30" :key="i">我是{{i}}</p> </div> <div v-progress="{type: 'right', color: 'linear-gradient(to bottom ,#F56C6C, #E6A23C)'}" class="box-c"> <p v-for="(x,i) in 30" :key="i">我是{{i}}</p> </div> <div v-progress="{type: 'left', color: 'radial-gradient(#14b9ff, #67C23A)', background: 'linear-gradient(to bottom ,#F56C6C, #E6A23C)'}" class="box-d"> <p v-for="(x,i) in 30" :key="i">我是{{i}}</p> </div> </div> </template> 复制代码

手机模式下略有问题，手机计算能力下进度条略有抖动。建议再PC 模式下使用。

转载于:https://juejin.im/post/5c8b56f25188257f882f16b4