微信小程序之步骤条（Steps）

75 阅读 0 评论 50 点赞

我是靠谱客的博主霸气小兔子，最近开发中收集的这篇文章主要介绍微信小程序之步骤条（Steps），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、效果图及简介：

（1）没完成的灰色小圆点表示
（2）完成的使用绿色小圆点设表示
（3）完成的最后一个步骤用代√的小圆点表示

在这里插入图片描述

二、实现思路：
（1）progress进度条：
开发文档查看属性：https://developers.weixin.qq.com/miniprogram/dev/component/progress.html
（2）view圆点样式：
wxml：

<view class='{{Steps==index?"steps":Steps<index?"steps3":"steps2"}}'></view>
1
wxss：

.steps{
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background-color: rgb(25, 185, 3);
text-align: center;
}
三、素材图片下载：

四、实现代码：
wxml:

<view class="steps_box">
<progress percent="{{Steps*percent}}" class="progress" stroke-width="3" color="rgb(25, 185, 3)" backgroundColor="rgb(185, 187, 190)" style="width:{{progress}}%"/>
<view class="steps_all">
<view class="steps_one_box" wx:for="{{StepsList}}" wx:key="index">
<view class='{{Steps==index?"steps":Steps<index?"steps3":"steps2"}}'>
<image wx:if="{{Steps==index}}" src="../../images/order_icon.png" class="steps_img"></image>
</view>
<view class="{{Steps>=index?'steps_wenzi':'steps_wenzi2'}}" >{{StepsList[index]}}</view>
</view>
</view>
</view>
wxss:

/* 步骤条 */
page{
background-color: rgb(190, 236, 238);
}
.steps_box{
margin-top: 200rpx;
width: 90%;
margin: auto;
background-color: white;
height: 200rpx;
position:relative;
}
.progress{
margin: auto;
margin-top: 75rpx;
}
.steps_all{
width: 100%;
position: absolute;
right: 0;
top: 50rpx;
display:flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.steps_one_box{
height: 100%;
width: 20%;
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.steps{
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background-color: rgb(25, 185, 3);
text-align: center;
}
.steps_img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.steps2{
width: 35rpx;
height: 35rpx;
border-radius: 50rpx;
background-color: rgb(25, 185, 3);
text-align: center;
}
.steps3{
width: 35rpx;
height: 35rpx;
border-radius: 50rpx;
background-color: rgb(185, 187, 190);
text-align: center;
}
.steps_wenzi{
margin-top: 40rpx;
font-size: 25rpx;
}
.steps_wenzi2{
margin-top: 40rpx;
font-size: 25rpx;
color: rgb(112, 113, 114);
}
js:

Page({

/**
* 页面的初始数据
*/
data: {
//设置当前完成步数
Steps:2,

// 当步骤为五步时步骤名不可超过五个汉字
StepsList: ["第一步", "第二步", "第三步", "第四步", "第五步"],
//步骤为五步时
progress:80,
percent:25,
// //步骤为四步时
// progress: 75,
// percent: 33,
// //步骤为三步时
// progress: 67,
// percent: 50,
},

})
————————————————
版权声明：本文为CSDN博主「Memory沙漏」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_45329584/article/details/97552398