菜单 搜索
首页 前端知识 uniapp vue css手写步骤条组件

uniapp vue css手写步骤条组件

2024-07-30 22:07:17 前端知识 前端哥 510 182 我要收藏

文章目录

    • 概要
    • 技术名词解释
    • 技术细节
    • 小结

概要

首先看效果

技术名词解释

  • uniapp
  • uni组件

技术细节

首先看需求是步骤条，然后看组件中没有自己想要的步骤条，那么就的自己去写

一、HTML部分

<template>
	<view class="mainStepOut">
		<view class="stepOut">
			<ul class="stepul">
 
				<li class="stepItem">
					<!-- 大圈部分 -->
					<view v-for="(item,index) in list" :key="index">
 
						<!-- 小圈部分 -->
						<view class="step1" v-if="item.step.length>0" v-for="(item1,index1) in item.step" :key="index1">
							<!-- 此处为小圆圈 -->
							<view :class="index1 === 0 ?(index===0?'iconSmall active':'iconSmall'):'iconSmall'"></view>
							<!-- 模拟步骤条连接线(判断列表到最后一项后把线隐藏) -->
							<view class="line" :style="'height:'+stepnewheight[index1]+'px'"
								v-if="index !== list.length - 1 && item.title1!==''">
							</view>
							<!-- 主题内容 -->
							<view class="stepStatus1" :id="'stepStatus1'+index1">
								<view :class="index1 === 0 ?(index===0?'titlecolor':'title'):'title'">
									<text>{{item1.title}}</text>
									<text>{{item1.date}}</text>
								</view>
								<view class="annotation">
									<view class="item_person" v-html="item1.content">
										<!-- {{item1.content}} -->
									</view>
								</view>
							</view>
						</view>
 
						<view class="step1" v-if="item.title1!==''">
							<!-- 此处为圆圈 -->
							<view :class="item.step.length!==0?'icon':(index == 0 ?'icon1':'icon')"></view>
							<!-- 模拟步骤条连接线(判断列表到最后一项后把线隐藏) -->
							<view class="line" :style="'height:'+newheight[index]+'px'"
								v-if="index !== list.length - 1">
							</view>
							<!-- 主题内容 -->
							<view class="stepStatus" :id="'stepStatus'+index">
								<view :class="item.step.length!==0 ? 'title':(index == 0 ?'titlecolor':'title')">
									<view>{{item.title1}}</view>
									<text v-if="item.title2">{{item.title2}}</text>
									<text>{{item.date}}</text>
								</view>
								<view class="annotation">
									<view class="item_person" v-html="item.content">
									</view>
								</view>
							</view>
						</view>
					</view>
				</li>
			</ul>
		</view>
	</view>
 
</template>
复制

二、CSS部分

<style lang="scss" scoped>
	.mainStepOut{
		height: 100%;
		overflow-y: auto;
	}
	.stepOut {
		height: 100%;
		padding-top: 40rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
 
		.stepul {
			list-style: none;
			width: 100%;
			margin-left: -20rpx;
			.stepItem {
				width: 100%;
				font-size: 32rpx;
				position: relative;
				border-left: #d7d7d7;
 
				// display: flex;
				.step1 {
					display: flex;
					width: 100%;
					// height: 200rpx;
 
					font-size: 32rpx;
					position: relative;
					border-left: #d7d7d7;
				}
 
				.icon {
					width: 32rpx;
					height: 32rpx;
					flex: 0 0 32rpx;
					border-radius: 50%;
					background: #fff;
					border: 4rpx solid #d7d7d7;
					position: relative;
					z-index: 888;
				}
 
				.icon1 {
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
					flex: 0 0 38rpx;
					right: 1.5px;
					border: 4rpx solid #2E88FF;
					position: relative;
					z-index: 888;
					background-color: #fff;
				}
 
				.icon1:before {
					content: "";
					position: absolute;
					top: 5rpx;
					left: 5rpx;
					width: calc(100% - 8rpx);
					height: calc(100% - 8rpx);
					background-color: #2E88FF;
					border-radius: 50%;
					flex: 0 0 calc(100% - 8rpx);
				}
 
				.iconSmall {
					width: 21rpx;
					height: 21rpx;
					border-radius: 50%;
					flex: 0 0 21rpx;
					background: #fff;
					// border: 4rpx solid #d7d7d7;
					position: relative;
					left: 2.8px;
					background: #808080;
					z-index: 888;
					margin-right: 10rpx;
				}
 
				.active {
					background-color: #2E88FF;
					border: 0;
				}
 
				.line {
					position: absolute;
					top: 12rpx;
					// left: 13rpx;
					left: 14rpx;
					width: 4rpx;
					// height: 200rpx;
					background-color: #e2e2e2;
					z-index: 111;
				}
 
				.stepStatus {
					width: 100%;
					padding: 0 25rpx;
					background: #FAFAFA;
					margin-bottom: 26rpx;
					margin-left: 15rpx;
					margin-right: 15rpx;
					padding-top: 10rpx;
					margin-top: -16rpx;
					padding-bottom: 10rpx;
					border-radius: 18rpx;
 
					.annotation {
						font-size: 25rpx;
						color: #b0b0b0;
					}
				}
 
				.stepStatus1 {
					width: 100%;
					padding: 0 25rpx;
					background: #FAFAFA;
					margin-bottom: 26rpx;
					margin-left: 15rpx;
					margin-right: 15rpx;
					padding-top: 10rpx;
					margin-top: -16rpx;
					padding-bottom: 10rpx;
					border-radius: 18rpx;
 
					.annotation {
						font-size: 25rpx;
						color: #b0b0b0;
					}
				}
 
				// 未进行
				.title {
					display: flex;
					color: #808080;
					margin-bottom: 10rpx;
 
					view {
						font-size: 30rpx;
						// font-weight: 700;
						margin-right: 18rpx;
					}
 
					text {
						font-size: 25rpx;
						display: flex;
						flex-direction: column-reverse;
						justify-self: end;
						margin-right: 20rpx;
					}
				}
 
				// 已进行
				.titlecolor {
					display: flex;
					color: #2E88FF;
					margin-bottom: 10rpx;
 
					view {
						color: #2E88FF;
						font-size: 30rpx;
						// font-weight: 700;
						margin-right: 18rpx;
					}
 
					text {
						font-size: 25rpx;
						display: flex;
						flex-direction: column-reverse;
						justify-self: end;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
复制

因为有小圈还有大圈所有上面的主体部分的进行判断，很好理解的上面都有注释，当你的数组长度最大时就不显示线条，反之显示

现在几乎实现了整体部分，但是bug出现了，就是你的部分如果高的话就会把下面部分挤出去，线条就不能正常链接了，这个问题怎么解决呢！！！别着急看下面

三、bug问题解决

咱们可以通过uniapp中的Api进行判断它的高度进行给线段设置高度（uni.createSelectorQuery）

uni.createSelectorQuery()

返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。

Tips:

  • 使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。
  • 默认需要使用到 selectorQuery.in 方法。
measureViewHeight() {
				for (let i = 0; i < this.list.length; i++) {
					uni.createSelectorQuery()
						.in(this)
						.select(`#stepStatus${i}`)
						.boundingClientRect(rect => {
							// console.log(`Div1的高度为：${rect.height}px`);
							let sum = rect.height + 9
							this.newheight.push(sum)
						})
						.selectViewport()
						.scrollOffset()
						.exec();
				}
				for (let i = 0; i < this.list.length; i++) {
					for (let j = 0; j < this.list[i].step.length; j++) {
						uni.createSelectorQuery()
							.in(this)
							.select(`#stepStatus1${j}`)
							.boundingClientRect(rect => {
								// console.log(`Div的高度为：${rect.height}px`);
								let sum = rect.height + 9
								this.stepnewheight.push(sum)
							})
							.selectViewport()
							.scrollOffset()
							.exec();
					}
 
				}
			},
复制

重新命名两个数组进行存储主体的高度，进行在html部分进行循环输出，我为什么在后面加了一个9呢，因为我进行测试输出的高度总比我想要的高度小，所有我给他们固定加了9px。可以根据自己的需求进行加减

<!-- 模拟步骤条连接线(判断列表到最后一项后把线隐藏) -->
<view class="line" :style="'height:'+stepnewheight[index1]+'px'"
								v-if="index !== list.length - 1 && item.title1!==''">
</view>
复制

四、完整代码

<template>
	<view class="mainStepOut">
		<view class="stepOut">
			<ul class="stepul">
 
				<li class="stepItem">
					<!-- 大圈部分 -->
					<view v-for="(item,index) in list" :key="index">
 
						<!-- 小圈部分 -->
						<view class="step1" v-if="item.step.length>0" v-for="(item1,index1) in item.step" :key="index1">
							<!-- 此处为小圆圈 -->
							<view :class="index1 === 0 ?(index===0?'iconSmall active':'iconSmall'):'iconSmall'"></view>
							<!-- 模拟步骤条连接线(判断列表到最后一项后把线隐藏) -->
							<view class="line" :style="'height:'+stepnewheight[index1]+'px'"
								v-if="index !== list.length - 1 && item.title1!==''">
							</view>
							<!-- 主题内容 -->
							<view class="stepStatus1" :id="'stepStatus1'+index1">
								<view :class="index1 === 0 ?(index===0?'titlecolor':'title'):'title'">
									<text>{{item1.title}}</text>
									<text>{{item1.date}}</text>
								</view>
								<view class="annotation">
									<view class="item_person" v-html="item1.content">
										<!-- {{item1.content}} -->
									</view>
								</view>
							</view>
						</view>
 
						<view class="step1" v-if="item.title1!==''">
							<!-- 此处为圆圈 -->
							<view :class="item.step.length!==0?'icon':(index == 0 ?'icon1':'icon')"></view>
							<!-- 模拟步骤条连接线(判断列表到最后一项后把线隐藏) -->
							<view class="line" :style="'height:'+newheight[index]+'px'"
								v-if="index !== list.length - 1">
							</view>
							<!-- 主题内容 -->
							<view class="stepStatus" :id="'stepStatus'+index">
								<view :class="item.step.length!==0 ? 'title':(index == 0 ?'titlecolor':'title')">
									<view>{{item.title1}}</view>
									<text v-if="item.title2">{{item.title2}}</text>
									<text>{{item.date}}</text>
								</view>
								<view class="annotation">
									<view class="item_person" v-html="item.content">
									</view>
								</view>
							</view>
						</view>
					</view>
				</li>
			</ul>
		</view>
	</view>
 
</template>
 
<script>
	import Api from '@/untils/api.js'
	export default {
		data() {
			return {
				list: [], //模拟数据
				newheight: [],
				stepnewheight: []
			};
		},
		created() {
 
		},
		mounted() {
			this.getProgressByAccountNo()
 
			this.$nextTick(() => {
				setTimeout(() => {
					this.measureViewHeight()
				}, 320)
			})
		},
		methods: {
			measureViewHeight() {
				for (let i = 0; i < this.list.length; i++) {
					uni.createSelectorQuery()
						.in(this)
						.select(`#stepStatus${i}`)
						.boundingClientRect(rect => {
							// console.log(`Div1的高度为：${rect.height}px`);
							let sum = rect.height + 9
							this.newheight.push(sum)
						})
						.selectViewport()
						.scrollOffset()
						.exec();
				}
				for (let i = 0; i < this.list.length; i++) {
					for (let j = 0; j < this.list[i].step.length; j++) {
						uni.createSelectorQuery()
							.in(this)
							.select(`#stepStatus1${j}`)
							.boundingClientRect(rect => {
								// console.log(`Div的高度为：${rect.height}px`);
								let sum = rect.height + 9
								this.stepnewheight.push(sum)
							})
							.selectViewport()
							.scrollOffset()
							.exec();
					}
 
				}
			},
			// 进度接口
			getProgressByAccountNo() {
				//接口
			}
		}
	};
</script>
 
<style lang="scss" scoped>
	.mainStepOut{
		height: 100%;
		overflow-y: auto;
	}
	.stepOut {
		height: 100%;
		padding-top: 40rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
 
		.stepul {
			list-style: none;
			width: 100%;
			margin-left: -20rpx;
			.stepItem {
				width: 100%;
				font-size: 32rpx;
				position: relative;
				border-left: #d7d7d7;
 
				// display: flex;
				.step1 {
					display: flex;
					width: 100%;
					// height: 200rpx;
 
					font-size: 32rpx;
					position: relative;
					border-left: #d7d7d7;
				}
 
				.icon {
					width: 32rpx;
					height: 32rpx;
					flex: 0 0 32rpx;
					border-radius: 50%;
					background: #fff;
					border: 4rpx solid #d7d7d7;
					position: relative;
					z-index: 888;
				}
 
				.icon1 {
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
					flex: 0 0 38rpx;
					right: 1.5px;
					border: 4rpx solid #2E88FF;
					position: relative;
					z-index: 888;
					background-color: #fff;
				}
 
				.icon1:before {
					content: "";
					position: absolute;
					top: 5rpx;
					left: 5rpx;
					width: calc(100% - 8rpx);
					height: calc(100% - 8rpx);
					background-color: #2E88FF;
					border-radius: 50%;
					flex: 0 0 calc(100% - 8rpx);
				}
 
				.iconSmall {
					width: 21rpx;
					height: 21rpx;
					border-radius: 50%;
					flex: 0 0 21rpx;
					background: #fff;
					// border: 4rpx solid #d7d7d7;
					position: relative;
					left: 2.8px;
					background: #808080;
					z-index: 888;
					margin-right: 10rpx;
				}
 
				.active {
					background-color: #2E88FF;
					border: 0;
				}
 
				.line {
					position: absolute;
					top: 12rpx;
					// left: 13rpx;
					left: 14rpx;
					width: 4rpx;
					// height: 200rpx;
					background-color: #e2e2e2;
					z-index: 111;
				}
 
				.stepStatus {
					width: 100%;
					padding: 0 25rpx;
					background: #FAFAFA;
					margin-bottom: 26rpx;
					margin-left: 15rpx;
					margin-right: 15rpx;
					padding-top: 10rpx;
					margin-top: -16rpx;
					padding-bottom: 10rpx;
					border-radius: 18rpx;
 
					.annotation {
						font-size: 25rpx;
						color: #b0b0b0;
					}
				}
 
				.stepStatus1 {
					width: 100%;
					padding: 0 25rpx;
					background: #FAFAFA;
					margin-bottom: 26rpx;
					margin-left: 15rpx;
					margin-right: 15rpx;
					padding-top: 10rpx;
					margin-top: -16rpx;
					padding-bottom: 10rpx;
					border-radius: 18rpx;
 
					.annotation {
						font-size: 25rpx;
						color: #b0b0b0;
					}
				}
 
				// 未进行
				.title {
					display: flex;
					color: #808080;
					margin-bottom: 10rpx;
 
					view {
						font-size: 30rpx;
						// font-weight: 700;
						margin-right: 18rpx;
					}
 
					text {
						font-size: 25rpx;
						display: flex;
						flex-direction: column-reverse;
						justify-self: end;
						margin-right: 20rpx;
					}
				}
 
				// 已进行
				.titlecolor {
					display: flex;
					color: #2E88FF;
					margin-bottom: 10rpx;
 
					view {
						color: #2E88FF;
						font-size: 30rpx;
						// font-weight: 700;
						margin-right: 18rpx;
					}
 
					text {
						font-size: 25rpx;
						display: flex;
						flex-direction: column-reverse;
						justify-self: end;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
复制

接口数据结构

小结

如果感觉还不错的话可以关注博主哦，会持续更新的，谢谢~谢谢

转载请注明出处或者链接地址：https://www.qianduange.cn//article/14570.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！