前端（uniapp）自定义步骤条

最新推荐文章于 2025-06-09 13:43:21 发布

澈子的狮子

最新推荐文章于 2025-06-09 13:43:21 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_52235911/article/details/132500421

本文详细描述了一个使用HTML、CSS和JavaScript构建的动态步骤指示器，包括自定义图标、文本框和交互功能。通过`.self-box`和`.textbox`类控制样式变化，实现用户界面的动态切换。

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

html

 <view class="steps">
			   	<view class="outbox">
			   			<view class="self-box" style="width: 310rpx;">
			   			   <view class="icon" style="width: 32rpx; height: 32rpx;background-color:#FABDA7;border-radius: 50%;display: flex;justify-content: center;align-items: center;position:absolute;z-index:99;">
			   				   <view style="width: 16rpx; height: 16rpx;background-color: #FA6F41;border-radius: 50%;"></view>
			   			   </view>
			   			   <view :class="{ currentLineColor: active >= 1 }" style="border-radius: 16rpx  0 0 16rpx;width: 310rpx;"></view> 
			   			</view>
			   			<view class="self-box" style="width: 300rpx;">
			   			   <view class="icon" style="width: 32rpx; height: 32rpx;background-color:#FABDA7;border-radius: 50%;display: flex;justify-content: center;align-items: center;position:absolute;z-index:99;left: -10rpx;">
			   			   		 <view style="width: 16rpx; height: 16rpx;background-color: #FA6F41;border-radius: 50%;"></view>
			   			   </view>
			   			  <view :class="{ currentLineColor: active >= 2 }" style="border-radius: 0  16rpx 16rpx 0;width: 300rpx; "></view>
			   			</view>
			   	</view>
			   	<view class="textbox">
			   		<text :class="{ currentFontColor: active >= 0 }">步骤1</text>
			   		<text :class="{ currentFontColor: active >= 1 }">步骤2</text>
			   		<text :class="{ currentFontColor: active >= 2 }">完成</text>
			   	</view>
</view>
<view @click="add">下一步</view>

js部分

export default {
		data() {
			return {
				active:0,
			}
		},
     methods: {
         add(){
            this.active++
      }
}

css部分

.steps {
	    width: 750rpx;
	    height: 196rpx;
	}
	.outbox {
		width: 610rpx;
		height: 16rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-left: 38rpx;
		margin-top: 60rpx;
		display: flex;
	}
	.textbox{
		width: 610rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		margin-left: 38rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.self-box {
		position: relative;
		display: flex;
		align-items: center;
	}
	 .self-box  view {
	  height: 16rpx;
	  background:#FCD8CC;
	}
	.icon{
		width: 32rpx;
		height: 32rpx;
		background-color: #FCD8CC;
	}
	 .self-box image {
	  width: 56rpx;
	  height: 56rpx;
	}
	.textbox  text {
	  font-size: 28rpx;
	  color: #CCCCCC;
	}
	 .textbox .currentFontColor {
	  color: #323232;
	}
	.self-box .currentLineColor {
	  background: #FA6F41;
	}

效果：