一、效果图及简介:
(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>
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,
},
})