[Uni-app] 微信小程序的圆环进度条

2024-03-19 12:44
文章标签 程序 app 微信 uni 进度条 圆环

本文主要是介绍[Uni-app] 微信小程序的圆环进度条，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图：

组件完整代码如下：

<template><view class="base-style":style="'position: relative;width: ' + diameter + 'px;height: ' + diameter + 'px;display: flex;flex-direction: row;background-color: ' + bgColor + ';'"><!-- 左半圆和右半圆都要经历下面的5步:[第1步]第1层限定区域; [第2步]第2层决定显示一个整圆的左半边还是右半边; [第3步]第3层先使用激活颜色绘制一个圆环, 再添加一个同级且宽度为区域一半的盒子A;[第4步]在盒子A中再使用圆环底色绘制一个圆环, 此时整个圆环是 '左一半是激活颜色、右一半是圆环底色', 但这个圆环同时只能被看到一半;[第5步]旋转第2层。 --><!-- 左半圆 --><view class="base-style" :style="firstLayerViewStyle"><view :style="secondLayerViewStyle + secondLayerForLeft"><!-- 使用激活颜色绘制一个圆环。 --><view :style="thirdLayerStyle"></view><!-- 再使用背景色遮盖同级圆环的一半。 --><view class="base-style" :style="thirdLayerStyleForBg"><view :style="fourthLayerStyleForBg" /></view><view v-if="0 < ePercent && ePercent < 0.5" :style="endPointStyle + endPointStyleForLeft" /></view></view><!-- 右半圆 --><view class="base-style" :style="firstLayerViewStyle"><!-- 适配：为了避免右侧遮盖显示不全 此处向左多移动了1px --><view :style="secondLayerViewStyle + 'left: ' + (- diameter / 2 - 1) + 'px;' + secondLayerForRight"><!-- 使用激活颜色绘制一个圆环。 --><view :style="thirdLayerStyle"></view><!-- 再使用背景色遮盖同级圆环的一半。 --><view class="base-style" :style="thirdLayerStyleForBg"><view :style="fourthLayerStyleForBg" /></view><view v-if="ePercent > 0.5" :style="endPointStyle + endPointStyleForRight" /></view></view><view v-if="0.5 == ePercent" :style="endPointStyle + 'background-color: ' + this.hoopBgColor + ';'" /><!-- #ifdef APP-PLUS --><!-- 处理现象: 安卓App的顶部和底部会有一个小白点。 --><!-- <view v-if="ePercent > 0.5" :style="'position: absolute;top: 0;' + repairPointStyle" /> --><!-- <view v-if="1.0 == ePercent" :style="'position: absolute;bottom: 0;' + repairPointStyle" /> --><!-- #endif --></view>
</template><!-- 组件名称： 圆环进度条。启发地址： https://www.cnblogs.com/jr1993/p/4677921.html 。编者信息： 867003077@qq.com 。 -->
<script>export default {name: 'progressCircle',props: {// 背景色（不宜设置为透明 否则 需要 在 左thirdLayer 的外面 再嵌套一个盒子）。bgColor: {type: String,default: '#FFFFFF'},// 圆环的外直径（单位px）。diameter: {type: Number,default: 250},// 圆环线条的厚度（单位px）。hoopThickness: {type: Number,default: 8},// 圆环底色（灰色的圆环）。hoopBgColor: {type: String,// default: 'transparent'default: '#F3F3F3'},// 圆环激活部分的颜色。hoopColor: {type: String,default: '#FF4C20'},// 圆环进度百分比值（其值范围在0到1之间）。percent: {type: [Number, String],default: 0,validator: val => {return val >= 0 && val <= 1;},},animate: {type: Boolean,default: false,},},data() {return {targetPercent: 0,ePercent: 0,showTimer: undefined,};},watch: {percent: {handler: function() {console.log('progressCircle_watch_percent', this.percent);this.loadData();},},},computed: {firstLayerViewStyle() {return 'position: relative;width: ' + (this.diameter / 2) +'px;height: ' + this.diameter + 'px;';},secondLayerViewStyle() {return 'box-sizing: border-box;position: absolute;top: 0;width: ' + this.diameter +'px;height: ' + this.diameter + 'px;';},thirdLayerStyle() {return 'box-sizing: border-box;width: ' + this.diameter + 'px;height: ' + this.diameter +'px;border-radius: ' + (this.diameter / 2) +'px;border-width: ' + this.hoopThickness +'px;border-style: solid;border-color: ' + this.hoopColor + ';';},thirdLayerStyleForBg() {return 'box-sizing: border-box;position: absolute;top: 0;left: ' + (this.diameter / 2) + 'px;width: ' +this.diameter + 'px;height: ' + this.diameter + 'px;background-color: ' + this.bgColor + ';';},fourthLayerStyleForBg() {return 'box-sizing: border-box;margin-left: ' + (-this.diameter / 2) + 'px;width: ' + this.diameter +'px;height: ' +this.diameter + 'px;border-radius: ' + (this.diameter / 2) + 'px;border-width: ' +this.hoopThickness + 'px;border-style: solid;border-color: ' + this.hoopBgColor + ';';},secondLayerForLeft() {let angle = 0;if (this.ePercent < 0.5) {angle += (180 * (this.ePercent - 0.5) / 0.5);}// #ifdef APP-PLUSreturn 'left: 0;transform: rotate(' + angle + 'deg);';// #endif// #ifdef MP-WEIXINreturn 'left: 0;transform: rotate(' + angle + 'deg);-webkit-transform: rotate(' + angle + 'deg);';// #endif},secondLayerForRight() {let angle = 0;if (this.ePercent > 0.5) {angle += (180 * (this.ePercent - 0.5) / 0.5);}// #ifdef APP-PLUSreturn 'right: 0;transform: rotate(' + angle + 'deg);';// #endif// #ifdef MP-WEIXINreturn 'right: 0;transform: rotate(' + angle + 'deg);-webkit-transform: rotate(' + angle + 'deg);';// #endif},// repairPointStyle() {// 	return 'left: ' + (this.diameter - this.hoopThickness) / 2 + 'px;width: ' +// 		this.hoopThickness + 'px;height: ' + this.hoopThickness + 'px;border-radius: ' +// 		this.hoopThickness / 2 + 'px;background-color: ' + this.hoopColor + ';';// },endPointStyle() {// 结束点圆心圈直径。const _circleCenterRadius = 2;return 'box-sizing: border-box;position: absolute;top: 0;left: ' + (this.diameter - this.hoopThickness) / 2 +'px;width: ' +this.hoopThickness + 'px;height: ' + this.hoopThickness + 'px;border-radius: ' + (this.hoopThickness / 2) +'px;border-width: ' + (this.hoopThickness / 2 - _circleCenterRadius) +'px;border-style: solid;border-color: ' +this.hoopColor + ';';},endPointStyleForLeft() {return 'background-color: ' + ((this.ePercent > 0.5) ? this.hoopColor : this.hoopBgColor) + ';';},endPointStyleForRight() {return 'background-color: ' + ((1 == this.ePercent) ? this.hoopColor : this.hoopBgColor) + ';';},},mounted() {console.log('progressCircle_mounted');this.loadData();},methods: {loadData() {this.targetPercent = parseFloat(this.percent);console.log('progressCircle_loadData');if (!this.animate) {this.ePercent = this.targetPercent;} else {let _this = this;this.ePercent = 0;this.showTimer && clearInterval(this.showTimer);this.showTimer = setInterval(() => {let tempPercent = _this.ePercent + 0.1;if (tempPercent < _this.targetPercent) {_this.ePercent = tempPercent;return;};_this.ePercent = _this.targetPercent;clearInterval(_this.showTimer);}, 200);}}}}
</script><style scoped>.base-style {box-sizing: border-box;/* 溢出隐藏 */overflow: hidden;}
</style>

调用页面：

<template><view class="my-page-container" :style="{ 'height': pageBoxH + 'px' }" @click="currentPercent=0.8"><progress-circle class="mine-member-level-progress" :diameter="180" :hoopThickness="10" :hoopColor="'orange'":percent="currentPercent" :animate="true" /></view>
</template><script>/** 演示页面 */import progressCircle from "@/components/progress-circle/index.vue";// import {//   queryDetail,// } from '@/api/mine.js';export default {name: 'myDemo',components: {progressCircle,},data() {return {pageBoxH: 1000,currentPercent: 0.25,};},beforeCreate() {console.log('beforeCreate enter');},created() {console.log('created enter');},mounted() {console.log('mounted enter');},onLoad(option) {console.log('onLoad enter');},onReady() {},methods: {},}
</script><style scoped>.my-page-container {background-color: white;box-sizing: border-box;padding: 10px 10px 50px 10px;display: flex;flex-direction: column;}
</style>

这篇关于[Uni-app] 微信小程序的圆环进度条的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/826034。

相关文章

React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
W外链微信推广短连接怎么做？

W外链微信推广短连接怎么做？

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
EMLOG程序单页友链和标签增加美化

EMLOG程序单页友链和标签增加美化

单页友联效果图： 标签页面效果图： 源码介绍 EMLOG单页友情链接和TAG标签，友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样，如果自适应就填写100%，TAG文件不用修改 安装方法：把Links.php和tag.php上传到网站根目录即可，访问 域名/Links.php、域名/tag.php 所有模板适用，代码就不粘贴出来，已经打
阅读更多...
跨系统环境下LabVIEW程序稳定运行

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中，不同电脑的配置和操作系统（如Win11与Win7）可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行，需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下，使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此，在开发程序时，尽量使用
阅读更多...
CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 （最大值之和）给定整数序列 a0,⋯,an−1，求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr（其中0≤l≤r<n0≤l≤r<n）表示，对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同，当且仅当下标不同。 例如，当原序列为 [1,2,1,2] 时，要计算子序列 [
阅读更多...
这些心智程序你安装了吗？

这些心智程序你安装了吗？

原文题目：《为什么聪明人也会做蠢事（四）》 心智程序 大脑有两个特征导致人类不够理性，一个是处理信息方面的缺陷，一个是心智程序出了问题。前者可以称为“认知吝啬鬼”，前几篇文章已经讨论了。本期主要讲心智程序这个方面。 心智程序这一概念由哈佛大学认知科学家大卫•帕金斯提出，指个体可以从记忆中提取出的规则、知识、程序和策略，以辅助我们决策判断和解决问题。如果把人脑比喻成计算机，那心智程序就是人脑的
阅读更多...
uniapp设置微信小程序的交互反馈

uniapp设置微信小程序的交互反馈

链接：uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗： title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon：'error'是设置我们失败的logo 设置的文字上限是7个文字，如果需要设置的提示文字过长就需要设置icon并给
阅读更多...
基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

系列文章目录 1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例 3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例 4.基于SSM的高校实验室管理系统+LW参考示例 5.基于SpringBoot的二手数码回收系统+原生微信小程序+LW参考示例 6.基于SSM的民宿预订管理系统+LW参考示例 7.基于
阅读更多...
Spring Roo 实站（ 一 ）部署安装 第一个示例程序

Spring Roo 实站（ 一 ）部署安装 第一个示例程序

转自：http://blog.csdn.net/jun55xiu/article/details/9380213 一：安装 注：可以参与官网spring-roo： static.springsource.org/spring-roo/reference/html/intro.html#intro-exploring-sampleROO_OPTS http://stati
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2