實現效果：

組件源碼：

組件主要涉及時間的計算、閏年的判斷，比較簡單，因此注釋比較少。
<progress></progress>組件為微信小程序官方的進度條。

<template><div class="year-progess"><progress :percent="percent" activeColor="#EA5A49"/><p>{{year}}已經過去{{days}}天，{{percent}}%</p></div> </template><script> export default {computed: {// 過了多少天days () {// 第一天let start = new Date()start.setMonth(0)start.setDate(1)// 今天的時間戳減去第一天的時間戳let offset = new Date().getTime() - start.getTime()return parseInt(offset / 1000 / 3600 / 24) + 1},// 今年是什么年year () {return new Date().getFullYear()},percent () {return (this.days / this.getDayOfYear() * 100).toFixed(1)}},methods: {// 判斷是否是閏年isLeadYear () {const year = new Date().getFullYear()if (year % 400 === 0) {return true} else if (year % 4 === 0 && year % 100 !== 0) {return true} else {return false}},// 獲取當前年份的天數getDayOfYear () {return this.isLeadYear ? 366 : 365}} } </script><style lang="less" scoped>.year-progess {width: 100%;margin-bottom: 20px;progress { margin-bottom: 10px;}} </style>

引用方法

在小程序pages中需要引用此組件的vue文件中引用即可，與vue引用方法一致，即：
引入：

import VYearProgess from '@/components/YearProgress'

注冊：

components: {VYearProgess }

應用：

<v-year-progess></v-year-progess>

總結

以上是生活随笔為你收集整理的Mpvue微信小程序时间消耗进度条组件的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。