[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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/283539.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

解决：visio导出公式为pdf图片乱码问题

解决：visio导出公式为pdf图片乱码问题

今天需要将Visio编辑好的以后的图输出pdf&#xff0c;但是点击保存后公式部分一直乱码&#xff0c;如下图所示 保存为pdf后会变成&#xff1a; 解决方案&#xff1a;保存时点击文件下方的快速打印&#xff0c;存到桌面&#xff0c;不要直接点击保存
阅读更多...
SG5032VAN差分晶振X1G004261001100专用于5G通讯设备

SG5032VAN差分晶振X1G004261001100专用于5G通讯设备

差分晶体振荡器(DXO)是目前行业中公认高技术&#xff0c;高要求的一款晶体振荡器&#xff0c;是指输出差分信号使用2种相位彼此完全相反的信号,从而消除了共模噪声,并产生一个更高性能的系统。差分晶振一般为六脚贴片晶振&#xff0c;输出类型分为好几种,LVDS&#xff0c;LV-PE…
阅读更多...
jmeter之接口功能自动化

jmeter之接口功能自动化

一、接口测试简述 接口&#xff1a;用来连接前端&#xff0c;后端还有移动端的程序模块。由于不同端的工作进度不一样&#xff0c;需要对最开始出来的接口进行接口测试。 接口分类&#xff1a;POST&#xff0c;GET&#xff0c;PUT&#xff0c;DELETE。 POST请求的数据是放在…
阅读更多...
day11【网络编程】-综合案例

day11【网络编程】-综合案例

day11【网络编程】 第三章 综合案例 3.1 文件上传案例 文件上传分析图解 【客户端】输入流&#xff0c;从硬盘读取文件数据到程序中。【客户端】输出流&#xff0c;写出文件数据到服务端。【服务端】输入流&#xff0c;读取文件数据到服务端程序。【服务端】输出流&#xf…
阅读更多...
力扣236 二叉树的最近公共祖先 Java版本

力扣236 二叉树的最近公共祖先 Java版本

文章目录 题目描述代码 题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&…
阅读更多...
院子摄像头的监控

院子摄像头的监控

院子摄像头的监控和禁止区域入侵检测相比&#xff0c;多了2个功能&#xff1a;1&#xff09;如果检测到有人入侵&#xff0c;则把截图保存起来&#xff0c;2&#xff09;如果检测到有人入侵&#xff0c;则向数据库插入一条事件数据。 打开checkingfence.py&#xff0c;添加如下…
阅读更多...
算法公式汇总

算法公式汇总

文章目录 三角函数定义式诱导公式平方关系两角和与差的三角函数积化和差公式和差化积公式倍角公式半角公式万能公式其他公式反三角函数恒等式 三角函数定义式 三角函数 定义式 余切&#xff1a; c o t A 1 t a n A \text { 余切&#xff1a;} \ cotA \frac{1}{tanA} 余切&a…
阅读更多...
AI Agent目前应用落地有哪些局限性？

AI Agent目前应用落地有哪些局限性？

谈到AI Agent目前应用落地有哪些局限性&#xff0c;还是要从概念、应用入手。 谈 到 AI Agent&#xff0c; 很多人都认为它是LLM的产物&#xff0c;了解 AI Agent 的人应该知道&#xff0c;Agent 概念并不是当今的产物&#xff0c;而是伴随人工智能而出现的智能实体概念不断进…
阅读更多...
Qt 利用共享内存实现一次只能启动一个程序(单实例运行)

Qt 利用共享内存实现一次只能启动一个程序(单实例运行)

Qt 利用共享内存实现一次只能启动一个程序 文章目录 Qt 利用共享内存实现一次只能启动一个程序摘要利用共享内存实现一次只能启动一个程序示例代码 关键字&#xff1a; Qt、 unique、 单一、 QSharedMemory、 共享内存 摘要 今天接着在公司搞我的屎山代码&#xff0c;按照…
阅读更多...
智能合约 之 部署ERC-20

智能合约 之 部署ERC-20

Remix介绍 Remix是一个由以太坊社区开发的在线集成开发环境&#xff08;IDE&#xff09;&#xff0c;旨在帮助开发者编写、测试和部署以太坊智能合约。它提供了一个简单易用的界面&#xff0c;使得开发者可以在浏览器中直接进行智能合约的开发&#xff0c;而无需安装任何额外的…
阅读更多...
鸿蒙Harmony应用开发—ArkTS（@Prop装饰器：父子单向同步）

鸿蒙Harmony应用开发—ArkTS（@Prop装饰器：父子单向同步）

Prop装饰的变量可以和父组件建立单向的同步关系。Prop装饰的变量是可变的&#xff0c;但是变化不会同步回其父组件。 说明&#xff1a; 从API version 9开始&#xff0c;该装饰器支持在ArkTS卡片中使用。 概述 Prop装饰的变量和父组件建立单向的同步关系&#xff1a; Prop变量…
阅读更多...
JSONP 实现跨域请求案例

JSONP 实现跨域请求案例

后端使用 express 搭建&#xff0c;案例代码如下&#xff1a; const express require(express)const app express() const PORT 3000app.get(/data, (req, res) > {const jsonData {name: Alan,age: 666,city: GD}const callback req.query.callback // 获取前端中的回…
阅读更多...
MNN 执行推理（九）

MNN 执行推理（九）

系列文章目录 MNN createFromBuffer&#xff08;一&#xff09; MNN createRuntime&#xff08;二&#xff09; MNN createSession 之 Schedule&#xff08;三&#xff09; MNN createSession 之创建流水线后端&#xff08;四&#xff09; MNN Session 之维度计算&#xff08;五…
阅读更多...
ROS2从入门到精通0-3：VSCode 搭建 ROS2 工程环境

ROS2从入门到精通0-3：VSCode 搭建 ROS2 工程环境

目录 0 专栏介绍1 Ubuntu下安装VSCode1.1 基本安装1.2 将VSCode添加到侧边栏 2 VSCode集成相关插件3 VSCode运行ROS2环境步骤3.1 安装编译依赖项3.2 创建工作空间和源码空间3.3 启动VSCode与配置 4 测试工程环境4.1 C版本4.2 Python版本 0 专栏介绍 本专栏旨在通过对ROS2的系统…
阅读更多...
【每日一问】IOS手机上Charles证书过期怎么办？

【每日一问】IOS手机上Charles证书过期怎么办？

1、如何查看证书是否过期? 设置>通用>VPN与设备管理 2、在Charles中重置证书 步骤1&#xff1a;重置证书 Help>SSL Proxying>Reset Charles Root Certificate… 步骤2&#xff1a;在浏览器中&#xff0c;下载证书 首先&#xff0c;手机连上代理&#xff0c;然…
阅读更多...
JavaScript 权威指南第七版（GPT 重译）（二）

JavaScript 权威指南第七版（GPT 重译）（二）

第四章&#xff1a;表达式和运算符 本章记录了 JavaScript 表达式以及构建许多这些表达式的运算符。表达式 是 JavaScript 的短语&#xff0c;可以 评估 以产生一个值。在程序中直接嵌入的常量是一种非常简单的表达式。变量名也是一个简单表达式&#xff0c;它评估为分配给该变…
阅读更多...
阿里云2核4G云服务器ECS和轻量应用服务器价格表

阿里云2核4G云服务器ECS和轻量应用服务器价格表

阿里云2核4G服务器租用优惠价格&#xff0c;轻量2核4G服务器165元一年、u1服务器2核4G5M带宽199元一年、云服务器e实例30元3个月&#xff0c;活动链接 aliyunfuwuqi.com/go/aliyun 活动链接如下图&#xff1a; 阿里云2核4G服务器优惠价格 轻量应用服务器2核2G4M带宽、60GB高效…
阅读更多...
面试算法-82-不同路径

面试算法-82-不同路径

题目 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#xff1f; …
阅读更多...
律师如何看待项目管理中的技术风险

律师如何看待项目管理中的技术风险

大家好&#xff0c;我是不会魔法的兔子&#xff0c;是一枚北京的执业律师&#xff0c;创建[项目管理者的法小院儿]&#xff0c;持续从法律的角度分享项目管理中的风险问题及预防&#xff0c;让项目管理者能够提早发现与解决项目执行过程中的风险&#xff0c;同时欢迎大家一起交…
阅读更多...
【C语言】数据在内存中的存储(包含大小端字节序问题)~

【C语言】数据在内存中的存储(包含大小端字节序问题)~

一、前言 我们在刚开始学习C语言的时候&#xff0c;就接触到了很多数据的不同类型。我们也知道&#xff0c;数据是存储在一块内存空间的&#xff0c;且我们只知道数据的类型决定着&#xff0c;该数据在内存中所占内存空间的大小&#xff0c;且超过一个字节的数据在内存中存储的…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023