小程序 步骤进步条(微信,飞书均适用)
效果展示
每个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