自定义uniapp小程序步骤条

前端小凯

已于 2024-07-26 11:14:55 修改

阅读量361

点赞数 3

文章标签：小程序 vue.js elementui

于 2024-07-26 10:59:54 首次发布

本文链接：https://blog.csdn.net/qq_43235503/article/details/140709910

版权

html：

<view class="step">
	<view class="stepBox">
		<view class="stepLine"></view>
		<view class="stepItem">
			<view v-if="stepStatus < 1" class="stopUnover">1</view>
			<image v-if="stepStatus == 1" class="stopActive" :src="host_url + 'static/stopActive.png'" mode="aspectFill"></image>
			<image v-else class="stopOver" :src="host_url + 'static/stopOver.png'" mode="aspectFill"></image>
			<view class="text">第一步</view>
		</view>
		<view class="stepItem">
			<view v-if="stepStatus < 2" class="stopUnover">2</view>
			<image v-else-if="stepStatus == 2" class="stopActive" :src="host_url + 'static/stopActive.png'" mode="aspectFill"></image>
			<image v-else class="stopOver" :src="host_url + 'static/stopOver.png'" mode="aspectFill"></image>
			<view class="text">第二步</view>
		</view>
		<view class="stepItem">
			<view v-if="stepStatus < 3" class="stopUnover">3</view>
			<image v-else-if="stepStatus == 3" class="stopActive" :src="host_url + 'static/stopActive.png'" mode="aspectFill"></image>
			<image v-else class="stopOver" :src="host_url + 'static/stopOver.png'" mode="aspectFill"></image>
			<view class="text">第三步</view>
		</view>
	</view>
</view>

<view class="send_bottom bgSubMainColor">
	<view class="send_btn stopMinus" v-if="stepStatus != 1" @click="stopMinus">上一步</view>
	<view class="send_btn" v-if="stepStatus != 3" @click="increase">下一步</view>
</view>

js变量：

data () {
    return {
        // 步骤条状态
		stepStatus: 1
    }
},

js方法：

/**
 * 上一步
 */
stopMinus() {
	this.stepStatus -= 1;
},
/**
 * 下一步
 */
increase() {
	this.stepStatus -= 1;
}

css:

.step {
	height: 176rpx;
	box-sizing: border-box;
	padding: 32rpx 112rpx 40rpx 112rpx;
	background: #FFFFFF;
	
	.stepBox {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		
		.stepLine {
			width: 418rpx;
			height: 8rpx;
			background-color: rgba(150, 190, 15, 0.3);
			position: absolute;
			top: 18rpx;
			left: 50rpx;
		}
		
		.stepItem {
			width: 112rpx;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			z-index: 2;
			
			image {
				margin-bottom: 20rpx;
			}
			
			.stopActive {
				width: 50rpx;
				height: 50rpx;
			}
			
			.stopOver, .stopUnover {
				width: 40rpx;
				height: 40rpx;
			}
			
			.stopUnover .text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
			}
			.stopUnover {
				margin-bottom: 20rpx;
				background: #EAE8E8;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
			}
			
			.text {
				color: #333333;
			}
		}
	}
}

.send_bottom {
	box-sizing: border-box;
	padding: 28rpx;
	
	.stopMinus {
		background-color: #fff;
		border: 2rpx solid var(--view-theme);
		color: var(--view-theme);
	}
	
	.send_btn:nth-of-type(2) {
		margin-left: 24rpx;
	}
}

效果图：