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

女爷i 2022-08-30 04:23 682阅读 0赞

一、效果图及简介：

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

![在这里插入图片描述][2019072720301829.png]

二、实现思路：  
（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

[2019072720301829.png]: /images/20220829/55f096243cb542dba03efd7973b89071.png