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

相关文章

问题：第一次世界大战的起止时间是 #其他#学习方法#微信

问题：第一次世界大战的起止时间是 #其他#学习方法#微信

问题：第一次世界大战的起止时间是 A.1913 ~1918 年 B.1913 ~1918 年 C.1914 ~1918 年 D.1914 ~1919 年 参考答案如图所示
阅读更多...
[职场] 护理专业简历怎么写 #经验分享#微信

[职场] 护理专业简历怎么写 #经验分享#微信

护理专业简历怎么写 　　很多想成为一名护理方面的从业者，但是又不知道应该怎么制作一份简历，现在这里分享了一份护理方面的简历模板供大家参考。 　　蓝山山 　　年龄：24 　　号码：12345678910 　　地址：上海市 邮箱：jianli@jianli.com 　　教育背景 　　时间：2011-09到2015-06 　　学校：蓝山大学 　　专业：护理学 　　学历：本科
阅读更多...
大学湖北中医药大学法医学试题及答案，分享几个实用搜题和学习工具 #微信#学习方法#职场发展

大学湖北中医药大学法医学试题及答案，分享几个实用搜题和学习工具 #微信#学习方法#职场发展

今天分享拥有拍照搜题、文字搜题、语音搜题、多重搜题等搜题模式，可以快速查找问题解析，加深对题目答案的理解。 1.快练题 这是一个网站 找题的网站海量题库,在线搜题,快速刷题~为您提供百万优质题库,直接搜索题库名称,支持多种刷题模式:顺序练习、语音听题、本地搜题、顺序阅读、模拟考试、组卷考试、赶快下载吧! 2.彩虹搜题 这是个老公众号了 支持手写输入，截图搜题，详细步骤，解题必备
阅读更多...
uniapp接入微信小程序原生代码配置方案（优化版）

uniapp接入微信小程序原生代码配置方案（优化版）

uniapp项目需要把微信小程序原生语法的功能代码嵌套过来，无需把原生代码转换为uniapp，可以配置拷贝的方式集成过来 1、拷贝代码包到src目录 2、vue.config.js中配置原生代码包直接拷贝到编译目录中 3、pages.json中配置分包目录，原生入口组件的路径 4、manifest.json中配置分包，使用原生组件 5、需要把原生代码包里的页面修改成组件的方
阅读更多...
Java面试八股之怎么通过Java程序判断JVM是32位还是64位

Java面试八股之怎么通过Java程序判断JVM是32位还是64位

怎么通过Java程序判断JVM是32位还是64位 可以通过Java程序内部检查系统属性来判断当前运行的JVM是32位还是64位。以下是一个简单的方法： public class JvmBitCheck {public static void main(String[] args) {String arch = System.getProperty("os.arch");String dataM
阅读更多...
一道经典Python程序样例带你飞速掌握Python的字典和列表

一道经典Python程序样例带你飞速掌握Python的字典和列表

Python中的列表（list）和字典（dict）是两种常用的数据结构，它们在数据组织和存储方面有很大的不同。 列表（List） 列表是Python中的一种有序集合，可以随时添加和删除其中的元素。列表中的元素可以是任何数据类型，包括数字、字符串、其他列表等。列表使用方括号[]表示，元素之间用逗号,分隔。 定义和使用 # 定义一个列表 fruits = ['apple', 'banana
阅读更多...
Python应用开发——30天学习Streamlit Python包进行APP的构建（9）

Python应用开发——30天学习Streamlit Python包进行APP的构建（9）

st.area_chart 显示区域图。 这是围绕 st.altair_chart 的语法糖。主要区别在于该命令使用数据自身的列和指数来计算图表的 Altair 规格。因此，在许多 "只需绘制此图 "的情况下，该命令更易于使用，但可定制性较差。 如果 st.area_chart 无法正确猜测数据规格，请尝试使用 st.altair_chart 指定所需的图表。 Function signa
阅读更多...
微信小程序开发必知必会：文件结构和基本配置

微信小程序开发必知必会：文件结构和基本配置

一、微信小程序基本文件结构 1.  project.config.json：项目的基本配置文件，包括项目名称、appid、项目目录、页面文件夹等。     {"setting": {"urlCheck": false,"es6": true,"postcss": true,"nodeModulesPath": "D:\\\\node_modules"},"appid": "wxd678e
阅读更多...
美容美发店营销版微信小程序源码

美容美发店营销版微信小程序源码

打造线上生意新篇章 一、引言：微信小程序，开启美容美发行业新纪元 在数字化时代，微信小程序以其便捷、高效的特点，成为了美容美发行业营销的新宠。本文将带您深入了解美容美发营销微信小程序，探讨其独特优势及如何助力商家实现业务增长。 二、微信小程序：美容美发行业的得力助手 拓宽客源渠道：微信小程序基于微信社交平台，轻松实现线上线下融合，帮助商家快速吸引潜在客户，拓宽客源渠道。 提升用户体验：
阅读更多...
程序人生--拔丝地瓜

程序人生--拔丝地瓜

一个会享受生活的人，难免会执迷于探索“三餐茶饭，四季衣裳”的朴素涵义。如今在这繁杂喧闹、竞争激烈的社会环境里，如何才能从周而复始的生活中挖掘出一点儿期待！这是一个仁者见仁智者见智的开放性话题。对于大部分的人来说，看电影、运动、旅游、美食、加班....是假日的备选安排。 春节临走之前，再次尝试“拔丝地瓜”，为何要强调“再次”二字？因为这道甜菜我已经尝试过很多次，失败与成功都经历过。十几年的烧饭经历
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2