地方新闻网站建设站长之家查询网

 针对步骤条封装完终于清清楚楚啦

先看效果：

附上代码：使用可直接复用：数据是写在了当前组件中，如有必须，可以使用其中的props传值stepInfos传递相应的数据，根据steps步数就可以控制走到哪一步啦

<template><view class="step-bar"><view class="step_item" v-for="(item,index) in stepInfo.list" :key="item.id"><view :class="stepInfo.step >= index+1 ? 'circle circle-active':'circle'"></view><view :class="stepInfo.step >= index+2 ? 'line line-active':'line'" v-if="index!==stepInfo.list.length-1"></view><view class="middle-box"><text:class="stepInfo.step < index+1 ? 'text1-actived':stepInfo.step == index+1?'text1-active':text1">{{item.name}}</text><text class="text2">{{item.time}}</text></view><view class="status_text":class="stepInfo.step < index+1 ? 'text1-actived':stepInfo.step == index+1?'text1-active':text1">{{item.status}}</view></view></view>
</template><script>export default {props: {// 传递步骤参数stepInfo: {type: Object,default: function() {return {list: [],step: 0}}}},data() {return {stepInfo: {step: 3,list: [{id: 1,name: '发起充值',time: '2020-12-12 12:47:56',status: '已完成'}, {id: 2,name: '处理中',time: '2020-12-12 12:47:56',status: '进行中'}, {id: 3,name: '到账成功',time: '2020-12-12 12:47:56',status: '未开始'}]}}},}
</script><style lang="scss" scoped>.step_item {position: relative;height: 144rpx;display: flex;.line {position: absolute;top: 40rpx;left: 8rpx;content: "";width: 4rpx;height: 100rpx;background-color: #E6E8EF;}.line-active {background-color: #FF2B46;}}.circle {width: 20rpx;height: 20rpx;margin-right: 40rpx;margin-top: 10rpx;border-radius: 50%;background-color: #E6E8EF;}.circle-active {background-color: #FF2B46;}.middle-box {display: flex;flex-direction: column;.text2 {color: #999999;font-size: 24rpx;}}.text1 {color: #666666;font-size: 28rpx;}.text1-active {color: #FF2B46;}.text1-actived {color: #333333;}.status_text {flex-grow: 1;display: flex;justify-content: flex-end;font-size: 28rpx;}.status_text_active {// color: #FF2B46;}
</style>