高度自定义进度条实现完整代码附示意图

实现功能：

自定义一个进度条，能手动拖动进度条，也可以点击相应的进度，根据当前进度条的进度显示相应的内容。

效果图：

实现代码：

封装组件：

<template><view class="boomBg"><view class="huiBg" @click="clickBoom"></view><view class="boomBlock" :animation="animationData1"><!-- :animation="animationData1" --><image class="boomTitle" mode="heightFix" :src="boomTitle"></image><image class="boomImgBg" mode="widthFix" @click="clickBoom" :src="boomImg"></image><view class="cententBlock"><!-- 入院前的tab和内容 --><view v-if="shipBoomIdx==0||shipBoomIdx==4"><view class="boom1Tabs"><view :class="childTypeIdx==idx?'boom1TabItemIn':'boom1TabItemNo'" @click="childTypeIdx=idx"v-for="(item,idx) in listGliomaObj[tipIdx].childTypeList"><text>{{item.childType}}</text></view></view><view class="boom1Centent"><view v-for="(item,idx) in listGliomaObj[shipBoomIdx].childTypeList[childTypeIdx].detail"><view v-if="item.content" class="boom1CTxt" v-html="item.content"></view></view></view></view><viewv-if="shipBoomIdx==1||shipBoomIdx==2||shipBoomIdx==3||shipBoomIdx==5||shipBoomIdx==6||shipBoomIdx==7"style="margin-top: 20rpx;height: 784rpx;" class="boom1Centent"><view class="boom1CItem" v-for="(item,idx) in listGliomaObj[shipBoomIdx].detail"><view v-if="item.title" class="boom1CTBlock"><image class="boom1CIcon" mode="widthFix" :src="titleIcon"></image><view class="boom1CTitle">{{item.title}}</view></view><view class="boom2CTxt" v-html="item.content"></view></view></view><image class="rightS" mode="heightFix" :src="rightS"></image></view><view class="bottomBlock"><view class="tips p_r"><view v-for="(item,idx) in listGliomaObj" @click="changeTipIdx(idx)":class="[idx%2==0?'tipItemTop':'tipItemB',tipIdx==idx?'tipIn':'tipNo']">{{item.type}}<view v-if="idx%2===0" class="triangleTop" :style="{left:triangleLeft(idx)}"></view><view v-if="idx%2!=0" class="triangleBottom" :style="{left:triangleLeft(idx)}"></view></view></view><view class="bottomTiaoBj1"></view><view class="bottomTiaoBj2"></view><view class="bottomTiaoBj3" :style="{width:bottomTiaoBj3Width +'px'}"></view><view class="bottomTiaoXin" :style="{left:bottomTiaoXinLeft +'px'}"></view><movable-area scroll-x="true" class="scroll-X"><movable-view direction="horizontal" :x="movableX" :friction="1" inertia="false" @change="movableChange"><image class="bottomTiaoQuan" :src="SBtn"></image></movable-view></movable-area></view></view></view>
</template>
<script>let imgPath = 'https://xxx/glioma/boom/'export default {props: ['shipIdx', 'listGliomaObj'],data() {return {shipBoomIdx: 0,childTypeIdx: 0,titleIcon: imgPath + 'titleIcon.png',SBtn: imgPath + 'SBtn.png',boomImg: '',rightS: imgPath + 'rightS.png',boomTitle: '',animationData1: {},boom1: imgPath + 'boombg1.png',boom2: imgPath + 'boombg2.png',// days: ['入院前', '入院日', '病情评估', '手术日', '术后处理', '出院日', '病情结果回报', '后续治疗'],tipIdx: 0,bottomTiaoBj3Width: 35,bottomTiaoXinLeft: 27,movableX: 0,btnLefts: [0, 34, 66, 102, 136, 170, 204, 280],};},watch: {},created() {this.shipBoomIdx = this.shipIdx;this.showShipBoomFc()this.changeTipIdx(this.shipBoomIdx)console.log('创建');},methods: {movableChange(e) {let left = e.detail.xthis.bottomTiaoXinLeft = left + 26this.bottomTiaoBj3Width = left + 34let aa = this.getClosestNum(left, this.btnLefts)this.btnLefts.forEach((item, idx) => {if (item == aa) {if (this.tipIdx === idx) returnthis.boomTitle = imgPath + 'title' + (Number(idx) + 1) + '.png'this.tipIdx = idx;this.shipBoomIdx = idx;}})// this.movableX = this.btnLefts[this.tipIdx]},// 点击下面的文案,切换changeTipIdx(idx) {this.tipIdx = idx;this.shipBoomIdx = idx;this.movableX = this.btnLefts[idx]this.bottomTiaoXinLeft = this.movableX + 26this.bottomTiaoBj3Width = this.movableX + 34this.boomTitle = imgPath + 'title' + (Number(idx) + 1) + '.png'this.childTypeIdx = 0;console.log('点击目标',this.movableX);},showShipBoomFc() {let idx = this.shipBoomIdx || 0this.boomTitle = imgPath + 'title' + (Number(idx) + 1) + '.png'this.boomImg = this.boom1;console.log('显示弹窗', this.shipIdx, this.shipBoomIdx);// if (idx == 0) {// 	this.boomImg = this.boom1;// } else {// 	this.boomImg = this.boom1;// }var animation = uni.createAnimation()animation.scale(0.01).opacity(0).step({duration: 50})this.animationData1 = animation.export();setTimeout(() => {animation.scale(1).opacity(1).step({duration: 500})this.animationData1 = animation.export();}, 100)},// JS取一个数在数组中最近的数getClosestNum(target, array) {let closest = array[0];let minDifference = Math.abs(closest - target);for (let i = 1; i < array.length; i++) {const difference = Math.abs(array[i] - target);if (difference < minDifference) {closest = array[i];minDifference = difference;}}return closest;},close() {this.$emit('closeShipBoom')},clickBoom() {var animation = uni.createAnimation()animation.scale(0.01).opacity(0).step({duration: 10})this.animationData1 = animation.export();this.animationData1.actions[0].animates = []this.$emit('closeShipBoom')},triangleLeft(idx) {if (idx == 0 || idx == 1 || idx == 3 || idx == 5) {return '18rpx'} else if (idx == 2 || idx == 4 || idx == 7) {return '26rpx'} else if (idx == 6) {return '40rpx'}},},};
</script><style lang="scss" scoped>.boom2CTxt {max-width: 100%;::v-deep img {max-width: 100%;}}.boomBg {width: 100%;height: 100vh;position: fixed;z-index: 991;.triangleTop {width: 0;height: 0;position: absolute;bottom: -4px;border-top: 5px solid #fff;border-left: 5px solid transparent;border-right: 5px solid transparent;}.triangleBottom {width: 0;height: 0;position: absolute;top: -4px;border-bottom: 5px solid #fff;border-left: 5px solid transparent;border-right: 5px solid transparent;}.bottomBlock {position: absolute;bottom: 0rpx;width: 100%;height: 122rpx;z-index: 9994;// background-color: #fff;.bottomTiaoBj1 {position: absolute;top: 44rpx;border-radius: 50rpx;background-color: #fff;width: 100%;height: 40rpx;}.bottomTiaoBj2 {position: absolute;top: 44rpx;border-radius: 50rpx;background-color: #D3ECE3;width: 97.5%;left: 1%;margin-top: 6rpx;height: 28rpx;-webkit-box-shadow: #949494 5rpx 5rpx 5rpx;}.scroll-X {position: absolute;top: 44rpx;border-radius: 50rpx;// background-color: #ffff00;left: 1%;margin-top: -26rpx;height: 28rpx;width: 84%;.bottomTiaoQuan {width: 58rpx;height: 60rpx;border-radius: 50%;position: absolute;top: 16rpx;margin-left: 35px;}}.bottomTiaoBj3 {position: absolute;top: 44rpx;border-radius: 50rpx;background-color: #28949C;left: 1%;margin-top: 6rpx;height: 28rpx;}.bottomTiaoXin {width: 18rpx;height: 18rpx;background: #88C8C6;border-radius: 50%;position: absolute;top: 56rpx;border-radius: 50%;}.tips {font-size: 16rpx;font-family: Source Han Sans CN;font-weight: bold;color: #28949C;margin-left: 80rpx;}.tipIn {color: #28949C;background-color: #fff;padding: 4rpx 4rpx 4rpx 4rpx;border-radius: 6rpx;}.tipNo {color: #000;background-color: #fff;padding: 4rpx 4rpx 4rpx 4rpx;border-radius: 6rpx;}.tipItemTop {position: relative;margin-right: 4rpx;// margin-right: 10rpx;}.tipItemB {position: relative;margin-right: 4rpx;top: 100rpx;}}.huiBg {width: 100%;height: 100vh;position: fixed;z-index: 992;background-color: rgba(0, 0, 0, 0.5);}.boomImgBg {width: 100%;position: absolute;z-index: 9991;top: -34rpx;}.boomBlock {position: relative;top: 200rpx;z-index: 993;width: 628rpx;left: 61rpx;height: 1130rpx;.boomTitle {position: absolute;z-index: 9992;height: 64rpx;top: 0rpx;left: 40rpx;}.cententBlock {position: absolute;z-index: 9993;width: 90%;top: 144rpx;left: 5%;}.boom1Tabs {display: flex;justify-content: space-between;text-align: center;font-size: 24rpx;.boom1TabItemIn {width: 282rpx;height: 74rpx;background: #28959D;color: #fff;border-radius: 10rpx;line-height: 30rpx;justify-content: center;/*子元素水平居中*/align-items: center;/*子元素垂直居中*/display: -webkit-flex;}.boom1TabItemNo {width: 282rpx;height: 74rpx;background: #ffffff;color: #000;border-radius: 10rpx;line-height: 30rpx;justify-content: center;/*子元素水平居中*/align-items: center;/*子元素垂直居中*/display: -webkit-flex;}}.boom1Centent {width: 100%;height: 724rpx;background: #ffffff;border-radius: 10rpx;margin-top: 10rpx;overflow-y: scroll;z-index: 9998;position: relative;overflow-x: hidden;.boom1CItem {position: relative;margin: 20rpx;.boom1CTBlock {width: 206rpx;height: 43rpx;position: relative;margin-bottom: 20rpx;.boom1CIcon {width: 206rpx;height: 43rpx;position: absolute;left: 0rpx;top: 0rpx;}.boom1CTitle {height: 43rpx;position: absolute;z-index: 9998;font-size: 23rpx;font-family: Source Han Sans CN;font-weight: bold;color: #ffffff;line-height: 46rpx;position: absolute;left: 54rpx;top: 0rpx;}}}.boom1CTxt {font-size: 28rpx;padding: 30rpx;}}.rightS {width: 50rpx;height: 222rpx;position: relative;z-index: 9995;// right: 28rpx;left: 596rpx;top: -600rpx;}}}
</style>

调用组件：

<ShipBoom v-if="listGliomaObj&&showShipBoom" :listGliomaObj="listGliomaObj" :shipIdx="shipIdx" @closeShipBoom="showShipBoom = false" :showShipBoom="showShipBoom"></ShipBoom>

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

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

相关文章

AIoT智能物联网平台技术架构参考

AIoT智能物联网平台技术架构参考

具体来说&#xff0c;AIoT平台能够实现智能终端设备之间、不同系统平台之间、不同应用场景之间的互融互通&#xff0c;进一步推动万物互联的进程。 AIoT智能物联网平台是结合了人工智能&#xff08;AI&#xff09;和物联网&#xff08;IoT&#xff09;技术的平台。它旨在通过物…
阅读更多...
达梦数据库使用

达梦数据库使用

达梦数据库使用 &#x1f4d1;前言 本文主要是【达梦数据库】——达梦数据库简单使用的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他…
阅读更多...
【Web】NodeJs相关例题wp

【Web】NodeJs相关例题wp

目录 ①[GKCTF 2020]ez三剑客-easynode ②[MoeCTF 2021]fake game ③[安洵杯 2020]Validator ④ [HZNUCTF 2023 final]eznode ⑤[CNSS] &#x1f3ed; EzPollution_pre ⑥[CNSS]✴️ EzPollution ①[GKCTF 2020]ez三剑客-easynode const express require(express); co…
阅读更多...
如何缓解可观察性挑战？

如何缓解可观察性挑战？

可观察性正在成为当代 DevOps 实践的基石。即使传统上不属于 DevOps 的部门也看到了在可观察性团队的支持下带来的好处。然而&#xff0c;到 2023 年&#xff0c;组织发现采用之路比预期更加崎岖。以下是 DevOps 团队在可观察性方面面临的七个最大挑战以及一些缓解这些挑战的建…
阅读更多...
数据结构 -- 并查集与图

数据结构 -- 并查集与图

目录 1.并查集 1.结构 2.原理 3.代码实现 1.存储 2.寻找根节点 3.是否为同一集合 4.求集合个数 5.合并为同一集合中 整体代码 2.图 1.基本知识 1.各个属性 2.特殊名词 3.图的解释 2.图的表示 1.邻接矩阵 2.邻接表 3.图的遍历 1.BFS--广度优先遍历 2.DFS--…
阅读更多...
Spark on yarn 模式的安装与部署

Spark on yarn 模式的安装与部署

任务描述 本关任务&#xff1a; Spark on YARN 模式的安装与部署。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; Spark 部署模式的种类&#xff1b;Spark on YARN 模式的安装。 Spark 部署模式 Spark 部署模式主要分为以下几种&#xff0c;Spark Stand…
阅读更多...
2021年2月1日 Go生态洞察：VS Code Go扩展中默认启用Gopls

2021年2月1日 Go生态洞察：VS Code Go扩展中默认启用Gopls

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
rss服务搭建记录

rss服务搭建记录

layout: post title: RSS subtitle: vps搭建RSS服务 date: 2023-11-27 author: Sprint#51264 header-img: img/post-bg-universe.jpg catalog: true tags: - 折腾 文章目录 引言RSShub-dockerRSS-radarFreshrssFluent reader获取fever api配置Fluent Reader同步 结语 引言 一个…
阅读更多...
IDEA设置方法注释模板

IDEA设置方法注释模板

目录 一.打开设置&#xff1a;File—>Settings... 二.选择Live Templates—>点击右侧 "" 号—>选择Template Group... 三.输入组名称&#xff0c;建议取容易理解的名字&#xff0c;点击OK 四.选中创建好的组&#xff0c;再次点击 "" 号&#…
阅读更多...
“大型”基础模型中幻觉的调查

“大型”基础模型中幻觉的调查

Abstract 基础模型 (FM) 中的幻觉是指生成偏离事实或包含捏造信息的内容。这篇调查论文广泛概述了近期旨在识别、阐明和解决幻觉问题的努力&#xff0c;特别关注“大型”基础模型&#xff08;LFM&#xff09;。该论文对LFM特有的各种类型的幻觉现象进行了分类&#xff0c;并建…
阅读更多...
手撕A*算法（详解A*算法）

手撕A*算法（详解A*算法）

A*算法原理 全局路径规划算法&#xff0c;根据给定的起点和终点在全局地图上进行总体路径规划。 导航中使用A*算法计算出机器人到目标位置的最优路线&#xff0c;一般作为规划的参考路线 // 定义地图上的点 struct Point {int x,y; // 栅格行列Point(int x, int y):x(x),y(y){…
阅读更多...
java学习part18抽象类

java学习part18抽象类

Java抽象类 详解-CSDN博客 111-面向对象(高级)-抽象类与抽象方法的使用_哔哩哔哩_bilibili 1.概念 2.抽象类 抽象类不能实例化&#xff0c;可以有属性&#xff0c;也可以有方法。 方法可以实现或者只声明不实现&#xff0c;要加一个abstract abstract class A{//定义一个抽…
阅读更多...
springboot整合redis+自定义注解+反射+aop实现分布式锁

springboot整合redis+自定义注解+反射+aop实现分布式锁

1.定义注解 import java.lang.annotation.*; import java.util.concurrent.TimeUnit;/** Author: best_liu* Description:* Date: 16:13 2023/9/4* Param * return **/ Retention(RetentionPolicy.RUNTIME) Target({ElementType.METHOD}) Documented public interface RedisLo…
阅读更多...
Go语言基础：包、函数、语句和注释解析

Go语言基础：包、函数、语句和注释解析

一个 Go 文件包含以下几个部分&#xff1a; 包声明导入包函数语句和表达式 看下面的代码&#xff0c;更好地理解它&#xff1a; 例子 package mainimport "fmt"func main() { fmt.Println("Hello World!") }例子解释 第 1 行&#xff1a; 在 Go 中&am…
阅读更多...
基于SSM的仓库管理系统的设计与实现

基于SSM的仓库管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…
阅读更多...
15个超级实用的Python操作，肯定有你意想不到的！

15个超级实用的Python操作，肯定有你意想不到的！

文章目录 1&#xff09;映射代理&#xff08;不可变字典&#xff09;2&#xff09;dict 对于类和对象是不同的3) any() 和 all()4) divmod()5) 使用格式化字符串轻松检查变量6) 我们可以将浮点数转换为比率7) 用globals()和locals()显示现有的全局/本地变量8) import() 函数9) …
阅读更多...
【LeetCode刷题】--90.子集II

【LeetCode刷题】--90.子集II

90.子集II class Solution {public List<List<Integer>> subsetsWithDup(int[] nums) {List<List<Integer>> ans new ArrayList<>();List<Integer> list new ArrayList<>();//排序后便于去重Arrays.sort(nums);dfs(0,nums,ans,lis…
阅读更多...
fastReID论文总结

fastReID论文总结

fastReID论文总结 fastReIDReID所面临的挑战提出的背景概念&#xff1a;所谓ReID就是从视频中找出感兴趣的物体&#xff08;人脸、人体、车辆等&#xff09;应用场景&#xff1a;存在的问题&#xff1a;当前的很多ReID任务可复用性差&#xff0c;无法快速落地使用解决方式&…
阅读更多...
基于SpringBoot实现的教务查询系统

基于SpringBoot实现的教务查询系统

一、系统架构 前端&#xff1a;html | js | css | jquery | bootstrap 后端&#xff1a;springboot | springdata-jpa 环境&#xff1a;jdk1.7 | mysql | maven 二、代码及数据库 三、功能介绍 01. 登录页 02. 管理员端-课程管理 03. 管理员端-学生管理 04. 管理员端-教师管理…
阅读更多...
史上最全接单平台集锦，程序员不容错过！

史上最全接单平台集锦，程序员不容错过！

非典型程序员不是每天都累成狗&#xff0c;天天”996"甚至”007“。可能&#xff0c;面临着上班摸鱼没事干&#xff0c;下班躺尸打游戏的无聊境况。那么&#xff0c;如果你也是这样的程序员&#xff0c;有没有什么安排可以打发时间&#xff1f; 闲着还不如挣钱~心情好的时…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023