微信小程序之步骤条(Steps)
2021/7/19 9:35:01
本文主要是介绍微信小程序之步骤条(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
这篇关于微信小程序之步骤条(Steps)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享
- 2024-11-20微信小程序全栈教程:从零开始的全攻略
- 2024-11-19微信小程序全栈学习:从零开始的完整指南