关键词：
效果
最近遇到了个需求，需要按后端传过来的刻度显示进度条，并且刻度个数不定，进度总额不定，要求进度会一直趋近于结尾但永远不会到达结尾。
实现
我的做法是只限于前90%显示后端传来的数据，后10%用来作趋近无穷的变化。
src/views/processLine.vue
<template>
<div class="container">
<div class="progressline">
<div class="progress" v-for="(item, index) in list" :key="index" :style="progressDistance(item.perNode)"></div>
<i class="line" :style=" 'width': percent + '%'"></i>
</div>
<div class="info">
<p class="text2">title</p>
<div class="node" v-for="(item, index) in list" :key="index" :style="nodeDistance(item.perNode)">item.node</div>
</div>
</div>
</template>
<script>
import mapGetters from 'vuex'
export default
name: 'progressLine',
computed:
...mapGetters('task', ['myPercent', 'myList']),
percent ()
let len = this.myList.length
return (90 / len) * this.myPercent
,
data ()
return
,
mounted ()
,
methods:
progressDistance (perNode)
let count = perNode + '%'
return left: `$count`
,
nodeDistance (perNode)
let count = perNode + '%'
return left: `calc($count - 60px)`
</script>
<style lang="scss" scoped>
.text2
font-size: 14px;
line-height: 24px;
.node
color: rgba($color: #1C1F23, $alpha: 0.8);
.container
color: #1C1F23;
.progressline
margin-top: 16px;
position: relative;
width: 100%;
height: 8px;
line-height: 8px;
background-color: #FFF3D9;
border-radius: 4px;
overflow: hidden;
text-align: center;
.progress
position: absolute;
width: 1px;
background: rgba(89, 89, 89, 0.3);
height: 8px;
z-index: 9;
i
position: absolute;
left: 0;
top: 0;
height: 100%;
border-radius: 4px;
.line
background-image: linear-gradient(to right, #FFF026, #FFB200);
.info
margin-top: 4px;
position: relative;
.node
position: absolute;
width: 60px;
font-size: 14px;
text-align: right;
top: 4px;
</style>
src/store/vuex.js
import Vue from 'vue'
import Vuex from 'vuex'
import task from './modules/task'
Vue.use(Vuex)
const locatVuexOption =
modules:
task
export default new Vuex.Store(locatVuexOption)
src/store/task.js
import getTaskInfo from '@/api/task'
import formatNum, formatThousand from '@/common/utils'
const task =
namespaced: true,
state: () => (
// 目前总数
myCur: 0,
// 任务阶梯列表
myList: []
// myList: [
//
// class: 1,
// lowerNode: 1,
// reward: 2000 // 奖励/元
// ,
//
// class: 2,
// lowerNode: 4,
// reward: 12000 // 奖励/元
// ,
//
// class: 3,
// lowerNode: 8,
// reward: 30000 // 奖励/元
// ,
//
// class: 4,
// lowerNode: 16,
// reward: 80000 // 奖励/元
// ,
//
// class: 5,
// lowerNode: 25,
// reward: 120000 // 奖励/元
//
// ]
),
getters:
// 任务进度
myPercent: state =>
const list = state.myList
const cur = state.myCur
const len = list.length
let pastNum = 0
let stage = 0
let progress = 0
for(let i = 0; i < len; i++)
if (cur >= list[i].lowerNode)
pastNum = list[i].lowerNode
stage += 1
if (i === len - 1)
if (cur == list[i].lowerNode)
return stage
else
// 不断重置上限
let top = pastNum * (Math.ceil(cur/pastNum) + 1)
progress = stage + ((cur - pastNum) / (top - pastNum))
continue
else if (cur < list[i].lowerNode)
if (i === 0)
progress = stage + (cur / (list[i].lowerNode- pastNum))
else
progress = stage + ((cur - pastNum) / (list[i].lowerNode- pastNum))
break
else
break
return progress
,
myList: state =>
let res = []
state.myList.forEach((item) =>
let count = (90 / state.myList.length) * item.class
let obj =
class: item.class,
node: formatThousand(item.lowerNode),
reward: formatNum(item.reward),
perNode: count
res.push(obj)
)
return res
,
mutations:
// 获取任务信息
getMyTask (state, payload)
let data = JSON.parse(JSON.stringify(payload))
state.myCur = data.cur
,
// 获取列表
getMyList (state, payload)
state.myList = payload
,
actions:
// 获取任务信息
async getTaskInfoData ( commit , params)
const res = await getTaskInfo(params)
if (res.data.status === 0)
commit('getMyTask', res.data.data.myTask)
commit('getMyList', res.data.data.myList)
else
this._vm.$message.error(res.data.msg || '获取信息失败！')
export default task
src/common/utils.js
//格式化数字（1,000,000.00）
export const formatNum = function (str)
let newStr = "";
let count = 0;
str += "";
if (str.indexOf(".") == -1)
for (let i = str.length - 1; i >= 0; i--)
if (count % 3 == 0 && count != 0)
newStr = str.charAt(i) + "," + newStr;
else
newStr = str.charAt(i) + newStr;
count++;
str = newStr;
return str;
else
for (let i = str.indexOf(".") - 1; i >= 0; i--)
if (count % 3 == 0 && count != 0)
newStr = str.charAt(i) + "," + newStr;
else
newStr = str.charAt(i) + newStr;
count++;
str = newStr + (str + "00").substr((str + "00").indexOf("."), 3);
return str;
// 格式化数字（10w）
export const formatThousand = function (str)
let num = Number(str)
if(num < 10000)
return num.toString()
else
return Math.round(num / 10000).toString() + 'w'
css跨浏览器进度条(代码片段)
利用css制作进度条(代码片段)
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><met 查看详情
进度条的美化(代码片段)
这里记录一种用css控制进度条美化的效果css代码：@-webkit-keyframesprogress-bar-stripesfrombackground-position:40px0tobackground-position:00@-moz-keyframesprogress-bar-stripesfrombackground-position:40px0tobackgro 查看详情
css奇技淫巧box-shadow实现圆环进度条(代码片段)
CSS奇技淫巧Box-shadow实现圆环进度条文章目录CSS奇技淫巧Box-shadow实现圆环进度条一、Box-shadow圆环进度条二、效果预览三、原理刨析四、实际应用五、总结六、参考资料💘七、推荐博文🍗一、Box-shadow圆环进度条实现圆环... 查看详情
css3实现炫酷进度条(代码片段)
看了一个进度条很漂亮，所以自己试试看html<divclass="load-container"> <spanclass="run"></span> <divclass="meter">0</div> </div>css样式： 查看详情
bootstrap进度条组件详解(代码片段)
Bootstrap进度条组件详解首先需要导入相关bootsrap的组件包：bootstrap.min.css、jquery.min.js、bootstrap.min.js等，这个就不多说了在网页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属... 查看详情
css自定义进度条(代码片段)
自定义进度条效果index.tsximportstylesfrom'./index.module.scss'importcrystalUrlfrom'./imgs/crystal.png'importobserverfrom'mobx-react-lite'importdataStorefrom'src/store/dataStore'constProgressBar:React.FC=props=> return( <divclassName=styles.p... 查看详情
色卡进度条(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">*margin:0;padding:0;.xwwidth:100px;height:80px;border:1pxsolidblack;flo 查看详情
模拟动态进度条(代码片段)
<styletype="text/css">.processwidth:10px;height:18px;background-color:#5bc0de;background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15)25%,transparent25%,transparent50%,rgba(255,255 查看详情
进度条------小案例(代码片段)
很少会用到，简单的写一下代码如下：<styletype="text/css">#boxwidth:400px;height:40px;border:1pxdashed#ccc;position:relative;#div2width:0;height:40px;background-color:blue;#div3position:absolute;right:-50px;t 查看详情
vue中的进度条(代码片段)
①首先需要安装依赖 npminstall--savenprogress如果是vuecli3需要在依赖中安装nprogress即可②使用 一：首先要在router文件的index.js中引入需要的包importNProgressfrom‘nprogress‘import‘nprogress/nprogress.css‘二：使用在导航守卫中使用route... 查看详情
vue进度条和图片的动态更改(代码片段)
1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title></title>6<linkrel="stylesheet"type="text/css"href="vue.css">7<scriptsrc="https://cdn.bootcss.com 查看详情
css奇技淫巧box-shadow实现圆环进度条(代码片段)
CSS奇技淫巧Box-shadow实现圆环进度条文章目录CSS奇技淫巧Box-shadow实现圆环进度条一、Box-shadow圆环进度条二、效果预览三、原理刨析四、实际应用五、总结六、参考资料💘七、推荐博文🍗一、Box-shadow圆环进度条实现圆环... 查看详情
5.18改背景进度条(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">*margin:0;padding:0;.xwwidth:100px;height:80px;border:1pxsolidblack;flo 查看详情
html+css+js实现❤️canvas圆形水波进度条动画特效❤️(代码片段)
🍅作者主页：Java李杨勇 🍅简介：Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】🍅欢迎点赞👍收藏⭐留言📝 效果演示&#x... 查看详情
html+css+js实现❤️canvas圆形水波进度条动画特效❤️(代码片段)
🍅作者主页：Java李杨勇 🍅简介：Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】🍅欢迎点赞👍收藏⭐留言📝 效果演示&#x... 查看详情