小程序 步骤进步条（微信，飞书均适用）

小程序 步骤进步条（微信，飞书均适用）

效果展示

每个item是这样的结构，目的是 实现 文字和圆圈对齐，把颜色设置成 你页面的背景颜色，就可以隐藏起始和结束位置多余的横线

1.无进度：

1.满进度：

代码：
html

<view class='box'>
		<view class='process-box' tt:for="{{processData}}">
			<view class='process'>
				<view class='process-line' style="background:{{item.start}}"></view>
				<image class='process-img' src="{{item.img}}"></image>
				<view class='process-line' style="background:{{item.end}}"></view>
			</view>
			<text class='process-name'>{{item.name}}</text>
			<text class="process-time">{{item.time}}</text>
		</view>
	</view>

css

/* 进度条 */
.box {
    display: flex;
    flex-wrap: nowrap;
    padding: 10rpx 10rpx 20rpx 10rpx;
    margin-top: 20rpx;
}

.process-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}

.process {
    display: flex;
    align-items: center;
    width: 100%;
}

.process-img {
    width: 50rpx;
    height: 50rpx;
}

.process-line {
    background: #eff3f6;
    flex: 1;
    height: 5rpx;
}

.process-name {
    font-size: 28rpx;
}
.process-time {
    font-size: 24rpx;
}

js

data: {
        state: 0,// 控制进度条进度,0代表无进度
        // 进度条
        processData: [{
            name: '创建',
            time: '2020-03-01',
            start: '#f0eeee',
            end: "black",
            img: '../../images/round.png'
        },
        {
            name: '意向',
            time: '2020-04-01',
            start: "black",
            end: "black",
            img: '../../images/round.png'
        },
        {
            name: '用户',
            time: '2020-05-01',
            start: "black",
            end: '#f0eeee',
            img: '../../images/round.png',
        }]
      }

setPeocessImg: function () {
        var processArr = this.data.processData
            if (this.data.state == 1) {
                processArr[0].img = "../../images/round1.png"
            } else if (this.data.state == 2){
                processArr[0].img = "../../images/round1.png"
                processArr[0].end = '#99CC00'
                processArr[1].img = "../../images/round2.png"
                processArr[1].start = '#99CC00'
            } else if (this.data.state == 3) {
                processArr[0].img = "../../images/round1.png"
                processArr[0].end = '#99CC00'
                processArr[1].img = "../../images/round2.png"
                processArr[1].start = '#99CC00'
                processArr[1].end = '#CC0033'
                processArr[2].img = "../../images/round3.png"
                processArr[2].start = '#CC0033'
            }
        this.setData({
            processData: processArr
        })
    },

最后

以上就是俊逸万宝路为你收集整理的小程序 步骤进步条（微信，飞书均适用）的全部内容，希望文章能够帮你解决小程序 步骤进步条（微信，飞书均适用）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。