微信小程序：纵向步骤条

最新推荐文章于 2024-03-21 09:41:38 发布

ruoyan8899

最新推荐文章于 2024-03-21 09:41:38 发布

阅读量1.3k

点赞数 3

分类专栏：学习笔记文章标签：大数据微信小程序前端

本文链接：https://blog.csdn.net/ruoyan8899/article/details/125735925

版权

该博客展示了如何使用vant-weapp组件库中的图标组件创建一个绿色完成的步骤图表。代码示例包括WXML、WXSS和JS部分，详细说明了每个步骤的状态显示（如已完成、未完成）以及时间信息的展示。通过调整样式和状态变量，可以定制化图表的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绿色完成图表引用的vant-weapp组件的图标组件

wxml代码

   <view class="stepBox" wx:if="{
  {pitem.open}}">
     <view class="box">
       <view class="{
  {item.status ==='1' ? 'greenSigleStep' : 'sigleStep'}}" wx:for="{
  {steps}}" wx:for-item="item" wx:key="text">
         <view class="topShelter" wx:if="{
  {item.first}}"></view>
         <view class="gray" wx:if="{
  {item.status === '0'}}"></view>
         <view class="green" wx:if="{
  {item.status === '1'}}">
           <van-icon name="check