uniapp小程序步骤条封装和调用

最新推荐文章于 2025-03-13 15:34:37 发布
最新推荐文章于 2025-03-13 15:34:37 发布
阅读量2.1k 收藏 3
点赞数 1
文章标签： uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47038177/article/details/134059187
版权
本文详细介绍了如何在uniapp项目中使用uni-steps插件创建步骤条，包括安装、组件引入、样式定制和页面交互逻辑。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

uniapp步骤条封装调用

.

一、效果图

在这里插入图片描述

二、封装说明和流程

2.1.首先说明使用的是uniapp插件市场的uni-steps,可以根据自己产品的需要来选择插件代码。

插件市场图片

2.2.安装到项目后，找到组件代码的位置。

在这里插入图片描述

2.3.根据项目修改流程条的判断条件和样式。

uni-steps.vue

//步骤条组件
<template>
	<view class="uni-steps">
		<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
			<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']"
				v-for="(item,index) in options" :key="index">
				<view
					:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
					:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}">
				  
				</view>
			 <view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"
			 	v-if="index === active ">
			 	<uni-icons :color="activeColor" type="clear" size="30"></uni-icons>
			 </view>
				<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"
					 v-else-if="index < active">
					<uni-icons :color="activeColor" type="checkbox-filled" size="30"></uni-icons>
				</view>
			
				<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
					v-else >
					{{index+ 1 }}
					<!-- <uni-icons :color="activeColor" type="clear" size="30"></uni-icons> -->
					<!-- <uni-icons :color="activeColor" type="checkbox-filled" size="30"></uni-icons> -->
				</view>
				<view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
					:style="{backgroundColor:index<active?activeColor:deactiveColor}">
						
					</view>
				<view
					:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
					:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}">
				
				</view>
			</view>
		</view>
		<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
			<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
				<view v-for="(item,index) in options" :key="index"
					:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
					<text :style="{color:index === active?activeColor:deactiveColor}"
						:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
					<text :style="{color: deactiveColor}"
						:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	/**
	 * Steps 步骤条
	 * @description 评分组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=34
	 * @property {Number} active 当前步骤
	 * @property {String} direction = [row|column] 当前步骤
	 * 	@value row 横向
	 * 	@value column 纵向
	 * @property {String} activeColor 选中状态的颜色
	 * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
	 */

	export default {
		name: 'UniSteps',
		components: {
			uniIcons
		},
		props: {
			direction: {
				// 排列方向 row column
				type: String,
				default: 'row'
			},
			activeColor: {
				// 激活状态颜色
				type: String,
				default: '#1aad19'
			},
			deactiveColor: {
				// 未激活状态颜色
				type: String,
				default: '#B7BDC6'
			},
			active: {
				// 当前步骤
				type: Number,
				default: 0
			},
			activeIcon: {
				// 当前步骤
				type: String,
				default: 'checkbox-filled'
			},
			options: {
				type: Array,
				default () {
					return []
				}
			} // 数据
		},
		data() {
			return {}
		}
	}
</script>

<style lang="scss">
	.uni-steps {
		/* #ifndef APP-NVUE */
		display: flex;
		width: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		flex-direction: column;
	}
	
	.uni-steps__row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}
	
	.uni-steps__column {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row-reverse;
	}
	
	.uni-steps__row-text-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	
	.uni-steps__column-text-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
	}
	
	.uni-steps__row-text {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex: 1;
		flex-direction: column;
	}
	
	.uni-steps__column-text {
		padding: 12upx 0upx;
		border-bottom-style: solid;
		border-bottom-width: 2upx;
		border-bottom-color: $uni-border-color;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}
	
	.uni-steps__row-title {
		font-size: $uni-font-size-base;
		line-height: 32upx;
		text-align: center;
	}
	
	.uni-steps__column-title {
		font-size: $uni-font-size-base;
		text-align: left;
		line-height: 36upx;
	}
	
	.uni-steps__row-desc {
		font-size: 24upx;
		line-height: 28upx;
		text-align: center;
	}
	
	.uni-steps__column-desc {
		font-size: $uni-font-size-sm;
		text-align: left;
		line-height: 36upx;
	}
	
	.uni-steps__row-container {
		height:60upx;
		border:1px soild red;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	
	.uni-steps__column-container {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		width: 60upx;
		flex-direction: column;
	}
	
	.uni-steps__row-line-item {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex-direction: row;
		flex: 1;
		height: 60upx;
		line-height: 60upx;
		align-items: center;
		justify-content: center;
	}
	
	.uni-steps__column-line-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
		align-items: center;
		justify-content: center;
	}
	
	.uni-steps__row-line {
		flex: 1;
		height: 2upx;
		background-color: $uni-text-color-grey;
	}
	
	.uni-steps__column-line {
		width: 2upx;
		background-color: $uni-text-color-grey;
	}
	
	.uni-steps__row-line--after {
		transform: translateX(1px);
	}
	
	.uni-steps__column-line--after {
		flex: 1;
		transform: translate(0px, 1px);
	}
	
	.uni-steps__row-line--before {
		transform: translateX(-1px);
	}
	
	.uni-steps__column-line--before {
		height: 12upx;
		transform: translate(0px, -1px);
	}
	
	.uni-steps__row-circle {
		border:1px solid #999999;
		background:transparent;
		width:60upx;
		height:60upx;
		border-radius: 50%;
		text-align: center;
		line-height: 54upx;
	}
	
	.uni-steps__column-circle {
		width: 10upx;
		height: 10upx;
		border-radius: 200upx;
		background-color: $uni-text-color-grey;
		margin: 8upx 0upx 10upx 0upx;
	}
	
	.uni-steps__row-check {
		margin: 0upx 12upx;
	}
	
	.uni-steps__column-check {
		height: 28upx;
		line-height: 28upx;
		margin: 4upx 0upx;
	}
</style>

说明：这里我还使用了uni-icon，这个同样需要插件市场下载然后引入

2.4.页面使用

2.4.1.单页面引入并注册
import uniSteps from '@/uni_modules/uni-steps/components/uni-steps/uni-steps.vue'
components: {
			uniSteps
		}
2.4.2.渲染层部分
<uni-steps :options="stepOptions" activeColor="#1aad19" :active="activeIndex"
				@selectStep="selectStep"></uni-steps>
2.4.3.data部分
                activeIndex: 0,
				stepOptions: [{
						title: '信息查重',
						index: 1
					},
					{
						title: '信息上传',
						index: 2
					},
					{
						title: '信息识别',
						index: 3
					},
					{
						title: '信息认证',
						index: 4
					}
				],
2.4.4.下一步和下一步方法
next() {
			if (this.activeIndex < this.stepOptions.length - 1) {
					this.activeIndex += 1
				} else {
					this.activeIndex = 0
				}
			},
			backone() {
				this.activeIndex -= 1
			},

到现在就已经完成了，如果有报错信息注意是否安装好了icon插件。

uniapp - 最新微信小程序手机号一键登录功能效果，uniapp小程序实现手机号码一键登录，uniapp微信小程序端通过手机号授权完成立即登录操作（详细示例源码，新手小白一键复制开箱即用）
高级前端工程师
01-29 7968
uniapp，微信小程序，uniapp小程序平台，uniApp手机号一键登录，uniapp小程序端手机号一键登录功能，实现微信小程序手机号一键登录，在uniapp中实现获取手机一键登录功能，uniapp手机号快捷登录，uniapp微信小程序授权登录并获取手机号，微信小程序手机号快速验证组件调用方式，uniapp小程序怎么用手机号一键登录，uniapp一键登录流程及代码，如何获取手机号一键登录到小程序，微信小程序获取本机手机号一键登录功能，新手详细教程，详细手机一键登录完整示例代码，uni-app微信unia
uniapp steps步骤条 uview组件 实现样式如图~
weixin_42560947的博客
04-27 6782
uniapp uview组件 steps步骤图 实现样式如图~
uniapp手写步骤条
weixin_47768765的博客
09-15 601
【代码】uniapp手写步骤条。
uniapp 实现的步进指示器组件
最新发布
狼性书生
03-13 418
采用 uniapp 实现的一款步进指示器组件，展示业务步骤进度等内容，对外提供“前进”、“后退”方法，让用户可高度自定义所需交互，适配 web、H5、微信小程序（其他平台小程序未测试过，可自行尝试）
uniapp步骤条
weixin_60656199的博客
08-02 1261
uniapp小程序步骤条点击下一步只有内容部分变动
uniapp实现步骤条
lllcuigu的博客
10-11 873
用到这个步骤条的时候，看了下uniapp和uview官网的案例，步骤条的组件样式改动不好改，就自己写了一个。
uniapp+vue+css手写步骤条组件
2301_76553269的博客
02-05 1361
首先看需求是步骤条，然后看组件中没有自己想要的步骤条，那么就的自己去写 因为有小圈还有大圈所有上面的主体部分的进行判断，很好理解的上面都有注释，当你的数组长度最大时就不显示线条，反之显示 现在几乎实现了整体部分，但是bug出现了，就是你的部分如果高的话就会把下面部分挤出去，线条就不能正常链接了，这个问题怎么解决呢！！！别着急看下面
uniapp组件-uni-steps 步骤条
热门推荐
03-03 1万+
效果图： 代码实现： <template> <view> <uni-steps :options="list1" active-color="#007AFF" :active="active" /> <uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" /> <button type="primary" @cli
uniapp蓝牙封装.zip
07-17
通过vuex的集成，可以实现应用程序状态的统一管理和跨组件通信，使得蓝牙打印功能在整个应用中的调用变得简单且高效。用户只需提供要打印的数据，无需关心底层的蓝牙连接和打印细节，也无需额外安装其他依赖包，提高...
uniapp开发小程序实现全局弹窗,可在js中调用
weixin_40466351的博客
07-30 3495
由于微信小程序API showModal 无法自定义样式，我们小程序的整体风格偏黑，所以不得不修改样式，但是我们的请求都进行了拦截，在拦截处弹出错误提示，在js中进行了showModal 的调用。
使用 UniApp 实现小程序的微信登录功能
10-15
首先，我们需要理解在使用UniApp开发微信小程序的微信登录过程中会涉及到的技术点，包括微信登录的流程、如何在UniApp中封装登录逻辑、如何在小程序中获取用户信息、以及如何将获取的用户信息安全地存储和使用。...
UniApp小程序实现微信登录：步骤与全局封装
在使用UniApp开发微信小程序时，实现微信登录功能是一个关键步骤，它允许用户通过微信账号快捷地登录你的应用。以下是一个详细的步骤概述： 1. **微信登录逻辑设计**： - 在`main.js`文件中，首先创建一个公共函数...
步骤条源码
07-31
jquery实现的步骤条
自定义uniapp小程序步骤条
qq_43235503的博客
07-26 610
自定义uniapp小程序步骤条
uni-app纵向步骤条
weixin_42079403的博客
03-21 1617
分享一下项目中自封装的步骤条，存个档~1. 话不多说，先看效果。
uniapp 电商app 步骤条功能的使用
yehaocheng520的博客
12-01 7164
步骤条功能 原型图如下图所示： dcloud插件市场中是有现成的组件的： 使用方法 script中引入 import uniSteps from '@/components/uni-steps/uni-steps.vue' export default { components: {uniSteps} } template中使用 <uni-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事
uniapp步骤条 组件
u014722196的博客
04-24 647
【代码】uniapp步骤条 组件。
前端（uniapp）自定义步骤条
weixin_52235911的博客
08-25 1202
【代码】前端（uniapp）自定义步骤条。
uniapp步骤条使用
junhian的博客
11-12 605
最近公司有一个这种需求，就是需要画一个简单步骤条，然后能显示进度。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值