【阶梯进度条实现方法】

阶梯进度条实现方法

主要针对进度指针的计算方式，无样式代码
图一

图二

进度条阶梯数量为动态的 最少数量为一个阶梯
阶梯为平分进度但是每个阶梯的达成人数式是不一样的
看下图为三阶梯式的进度条

后台数据格式

一阶梯：累计邀请3个人 可达成 完成当前阶梯需要邀请3人
二阶梯：累计邀请6个人 可达成 完成当前阶梯需要邀请3人
三阶梯：累计邀请10个人 可达成 完成当前阶梯需要邀请4人

假如邀请了3个人完成了第一阶梯那么进度条的进度应该是当前阶段进度的100%，总进度的33%
可以判断领奖状态为可领奖时 拿这个阶梯索引加1 与 阶梯数组总长度 换算百分比就出来了，不用算当前阶梯的进度 就可以直接换算总进度了

假如总邀请了4个人完成了第一阶梯，并且在二阶梯完成了1/3 的进度
这个时候总进度该怎么算
使用循环 先判断已完成的阶梯
他完成了一阶梯 那么进度就是33%
然后计算在第二阶梯已邀请的人数
我这里是后台返回了 当前阶梯还需要还需要邀请多少人
那么我可以直接拿当前阶梯的达成人数减去上一个阶梯的达城人数
就算出来了 完成当前阶梯所需的人数
拿到当前阶梯所需的人数 减去 当前阶梯还需要还需要邀请多少人
就得出来当前阶梯已经邀请了多少人 == 1
那么在第二阶梯里的进度就是33%
这个时候就需要计算总进度了
我们已经有了第一阶梯占总进度的33%
第二阶梯站总进度的百分比 = （完成当前阶梯所需的人数 / 当前阶梯已经邀请了多少人）/ 阶梯数量
11% = （1/3）/ 3
在拿上面的已完成总进度加上当前阶段所占的总进度就得出
33% + 11% = 44%
这种做法可以避免在活动进行中的时候，后台修改了某个阶梯的达成人数导致的前端进度计算出错的问题，不使用总数计算也是为了防止修改已完成阶梯的达成人数。

代码实现

<template>
	<div>
		<lyzProgress :width="percentageNum"></lyzProgress>
	</div>
</template>

<script>
import lyzProgress from '@/components/lyz-progress/lyz-progress.vue'
export default {
  components: { lyzProgress },
  props: {
    progress: {
      type: Array,
      default: () => {
        return [
          {
            stageId: 1, // 阶段id
            sort: 0, // 序号
            gradeNum: 3, // 达标人数
            disableStatus: 1, // "禁用状态 0禁用 1不禁用"
            rewardStatus: 1 // 领奖状态 0不可领奖 1可以领奖
          }, {
            stageId: 10, // 阶段id
            sort: 1, // 序号
            gradeNum: 6, // 达标人数
            disableStatus: 1, // "禁用状态 0禁用 1不禁用"
            rewardStatus: 0 // 领奖状态 0不可领奖 1可以领奖
          }, {
            stageId: 11, // 阶段id
            sort: 2, // 序号
            gradeNum: 10, // 达标人数
            disableStatus: 1, // "禁用状态 0禁用 1不禁用"
            rewardStatus: 0 // 领奖状态 0不可领奖 1可以领奖
          }
        ]
      }
    }
  },
  data() {
    return {
      numTemp: 2,
      percentageNum: 0
    }
  },
  mounted() {
    this.getProgressNum()
    this.$nextTick(() => {
      console.log(this.percentageNum)
    })
  },
  methods: {
    percentage(val, total) {
      if (val === 0 || total === 0) {
        return 0
      }
      const i = (Math.round(val / total * 10000) / 100.00)
      if (i > 100) {
        return 100 // 小数点后两位百分比
      } else if (i <= 100 && i >= 0) {
        return i // 小数点后两位百分比
      } else {
        return 0 // 小数点后两位百分比
      }
    },
    // 阶梯进度条算法
    getProgressNum() {
      this.percentageNum = 0
      for (let index = 0; index < this.progress.length; index++) {
        let differenceNum = 0
        const item = this.progress[index]
        if (item.rewardStatus === 1) {
          this.percentageNum = this.percentage(index + 1, this.progress.length)
        } else {
          let s = 0 // 当前阶段达成所需人数
          s = index === 0 ? item.gradeNum : item.gradeNum - this.progress[index === 0 ? 0 : index - 1].gradeNum
          differenceNum = s - this.numTemp // 当前阶段已邀请人数
          this.percentageNum += this.percentage(differenceNum, s) / this.progress.length
          return
        }
      }
    }
  }
}
</script>

<style scoped lang='scss'>
</style>

计算出的进度

我项目中用了几次，这个计算还是比较有意思的，所以就记录一下！

个人uniapp插件主页