uniapp自定义进度条组件

目标效果
在这里插入图片描述

原型设计为这样的样式,但是现有的进度条都无法满足需求,于是编写组件实现。

设计引用格式为

<zLineProgress :total="15" :val="7" title="你好吗" />

定义组件

<template><view style="height: 3.5rem; margin: 0 1em;"><view class="line-total">{{total}}</view><view style="position: relative;">			<view class="line-base"></view><view class="line-blue" :style="'width: ' + (val / total * 100) + '%'"></view></view><view class="line-val"><text>{{title}}</text><text>{{val}}</text></view></view>
</template><script>
export default {name: 'zLineProgress',data() {return {}},props: {// 标题title: {type: [String, Number],default: ''},total: {type: [Number],default: 0},val: {type: [Number],default: 0}},computed: {},methods: {}
}
</script><style scoped>
.line-total {color: #FFB000;text-align: right;font-size: 25rpx;font-style: normal;font-weight: 700;line-height: normal;
}
.line-base {position: absolute;width: 100%;height: 3px;border-radius: 8px;background: rgba(128, 136, 142, 0.40);
}
.line-blue {position: absolute;width: 50%;height: 4px;border-radius: 8px;background: #1677FF;box-shadow: 0px 0px 4px 0px rgba(22, 119, 255, 0.50);
}
.line-val {display: flex;justify-content: space-between;color: #7e7e7e;font-size: 25rpx;font-weight: 50px;margin-top: 12rpx;
}
</style>

页面导入

import zLineProgress from '../../uni_modules/z-line-progress.vue'

配置组件声明

components: {"zLineProgress": zLineProgress
},

然后如本文开头所示使用即可

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

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

相关文章

Es6新特性

一、 let 声明变量 不能重复声明有块级作用域&#xff08;不影响作用域链&#xff0c;函数里可以拿到函数外的变量&#xff09;不存在变量提升 经典案列&#xff1a;&#xff08;把for里面的var i 0; 改成 let i 0就好了&#xff0c;不然items[i]就会报错&#xff09; 二、…

Mars3d标绘的时候通过绑定单击事件,查询点击落点的图层类型

需求期望&#xff1a; 期望可以判断标绘点落下的位置是什么图层类型&#xff0c;例如是否是3dtitles模型&#xff0c;或者是gltf模型&#xff0c;或者是其他数据图层。 需求来源&#xff1a; 标绘点时&#xff0c;无法知道点落下的地方的图层类型 解决方案&#xff1a; ma…

C++ string类(1)—初始化、容量操作、迭代器

目录 前言 一、string类 二、初始化 1、无参或带参 2、用字符串变量初始化 3、用字符串初始化 4、指定数量字符 三、容量操作 1、size 2、push_back 3、append​编辑 4、运算符 5、reserve 6、resize 四、迭代器 1、正向迭代器 2、反向迭代器 3、const迭代器…

排序算法介绍(四)快速排序

0. 简介 快速排序&#xff08;Quick Sort&#xff09;是一种高效的排序算法&#xff0c;采用了分治的思想。它选择一个基准元素&#xff0c;通过一趟排序将待排序序列分割成独立的两部分&#xff0c;其中一部分的所有元素都比基准元素小&#xff0c;另一部分的所有元素都比基准…

邦芒支招:管理者做好管理带团队的十大招数

如何做好一个团队的管理&#xff0c;俗话说&#xff1a;”得民心者得天下“&#xff0c;一个好的团队&#xff0c;应该做到以人为本&#xff0c;这样才能使团队和个人双双获益。接下来小邦给大家分享如何做好一个团队的管理。 ​ ​要做好一个团队的管理&#xff0c;需要关注…

iOS代码混淆工具

目录 引言 混淆效果 字符串加密 代码插入 其他混淆选项说明 总结 参考资料 &#x1f512; 这是一篇介绍iOS代码混淆工具的技术博客&#xff0c;旨在帮助开发者提高代码安全性。本工具来自于Github的混淆词库和代码&#xff0c;通过差异化处理和代码合并生成数亿种用于混淆…

激活函数的作用

目录 1. 激活函数的作用 2. 常见的激活函数类型 3. 激活函数的选择 4. 激活函数的影响 1. 激活函数的作用 激活函数在人工神经网络中扮演着至关重要的角色。它们的主要作用是为网络中的每个神经元引入非线性变换&#xff0c;这使得神经网络能够学习和执行非线性复杂的任务。…

【备忘干货】c/c++ (wasm)和js互相调用记录

c/c&#xff08;wasm&#xff09;和js互相调用记录 废话 :)准备工作&#xff1a;安装Emscripten初探&#xff1a;C(wasm)之hello world进一步探究&#xff1a;接口调用1.js调用c&#xff0c;一些基本类型的传递&#xff08;char*&#xff0c;int&#xff0c;float&#xff09;以…

安装Python以及pycharm

Pycharm是编辑器。相当于Word对文字进行编辑。 Python是解释器。讲代码翻译为计算机可以理解的指令。 1、安装Python 官网&#xff1a;Welcome to Python.org 打开的时候有点慢等待一会就好&#xff0c;点击下载&#xff0c;选择Windows版本 等待一会&#xff0c;可以看到如…

docker内容整理

docker内容整理 docker的安装 检查之前是否安装过docker&#xff0c;如果有使用yum remove docker卸载 [rootwoniu ~]# yum remove docker \ > docker-client \ > docker-client-latest \ > docker-common \ > docker-latest \ > docker-latest-logrotate \ &g…

行业分析:轻轨行业发展现状及市场投资前景

轻轨是城市轨道建设的一种重要形式&#xff0c;也是当今世界上发展最为迅猛的轨道交通形式。轻轨的机车重量和载客量要比一般列车小&#xff0c;因此叫做“轻轨”。 城市轻轨具有运量大、速度快、污染小、能耗少、准点运行、安全性高等优点。城市轻轨与地下铁道、城市铁路及其…

day5 判断2个字符串是否字母完全相同

bool isAnagram(string s, string t) { int record[26] {0}; for (int i 0; i < s.size(); i) { // 并不需要记住字符a的ASCII&#xff0c;只要求出一个相对数值就可以了 record[s[i] - a]; } for (int i 0; i < t.size(); i) { record[t[i] - a]--; } for (int i 0;…

ICC2:如何创建多个core区,分别做power plan

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 如下图,core区域(core row)仅需要存在两个地方,右上大的core区,以及ram上下。 这里需要进行两步操作,分别是create site array创建指定位置的core row,上图所示部分,第二步是创建pg region…

深入理解GMP模型

1、GMP模型的设计思想 1&#xff09;、GMP模型 GMP分别代表&#xff1a; G&#xff1a;goroutine&#xff0c;Go协程&#xff0c;是参与调度与执行的最小单位M&#xff1a;machine&#xff0c;系统级线程P&#xff1a;processor&#xff0c;包含了运行goroutine的资源&#…

从零构建属于自己的GPT系列3:模型训练2(训练函数解读、模型训练函数解读、代码逐行解读)

&#x1f6a9;&#x1f6a9;&#x1f6a9;Hugging Face 实战系列 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在PyCharm中进行 本篇文章配套的代码资源已经上传 从零构建属于自己的GPT系列1&#xff1a;文本数据预处理 从零构建属于自己的GPT系列2&#xff1a;语…

Centos系列:Centos7下部署nginx(三种方式安装部署,图文结合超详细,适合初学者)

Centos7下部署nginx&#xff08;三种方式安装部署&#xff0c;图文结合超详细&#xff0c;适合初学者&#xff09; Centos7下部署nginx一. ngxin是什么二. nginx的作用正向代理和反向代理的区别 三. 安装部署安装环境1. yum安装配置nginx源启动nginx浏览器访问&#xff0c; IP:…

打印菱形图案C语言

C代码实现&#xff1a; #include <stdio.h> void printDiamond(int n) { int i, j, space n - 1; // 打印上半部分包括中间行 for (i 0; i < n; i) { // 打印空格 for (j 0; j < space; j) printf(" "); // 打印星号 for (j 1; j < 2 *…

Canvas鼠标画线

鼠标按下开始画线,鼠标移动根据鼠标的轨迹去画,鼠标抬起停止画线 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">…

Java多线程技术三:锁——ReentrantLock的使用

1 概述 在Java多线程中可以使用synchronzied关键字来实现线程间同步&#xff0c;不过在JDK1.5中新增的ReentrantLock类也能达到同样的效果&#xff0c;并且在扩展功能上更加强大。

举例说明自然语言处理(NLP)技术。

本文章由AI生成&#xff01; 以下是自然语言处理&#xff08;NLP&#xff09;技术的一些例子&#xff1a; 机器翻译&#xff1a;将一种语言翻译成另一种语言的自动化过程。常见的机器翻译系统包括谷歌翻译&#xff0c;百度翻译等。 语音识别&#xff1a;将口头语言转换成文本…