本文共 1564 字,大约阅读时间需要 5 分钟。
效果图:
这里实现4个步骤,要其他步骤的可以根据代码来改,下面我们来看看代码具体是怎么实现的:
Page({ data: { stepList: [{ name: '开始' }, { name: '扫描' }, { name: '付款' }, { name: '完成' }, ], stepNum: 1 //当前的步数 }, onLoad: function () { }, // 下一步 numSteps() { this.setData({ stepNum: this.data.stepNum == this.data.stepList.length ? 1 : this.data.stepNum + 1 }) },})
page { width: 100%; height: 100%;}.steps_box { width: 100%; display: flex; /* flex-direction: row; */ align-items: center; justify-content: center;}.block-step { display: flex; flex-direction: row; /* align-items: center; justify-content: center; */}.view_item { display: flex; align-items: center; justify-content: center; flex-direction: column;}.view_item text { font-size: 30rpx; margin-top: 20rpx; /* color: #909090; */}.view_item view { width: 45rpx; height: 45rpx; /* background-color: red; */ border: 3rpx solid #909090; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #909090; font-size: 30rpx; content: "\e732";}.view_line { width: 15%; height: 5rpx; margin: 0rpx 2% 40rpx 2%; /* background: linear-gradient(to right, #ead6ee, #a0f1ea); */}.line_bgcolor1{ background-color: #e0e0e0;}.line_bgcolor{ background: linear-gradient(to right, #5fe7ff, #00a336);}
{ { index+1}} { { item.name}}
转载地址:http://ugvzk.baihongyu.com/