微信小程序-纵向步骤条

最新推荐文章于 2023-02-22 15:53:15 发布

猪小米

最新推荐文章于 2023-02-22 15:53:15 发布

阅读量1.6k

点赞数 2

文章标签：小程序

本文链接：https://blog.csdn.net/m0_37742411/article/details/115676345

版权

本文介绍了如何在微信小程序中创建一个垂直展示的步骤条，包括组件的wxml、wxss和JS部分的详细实现，并讲解了文件的引用方法。

摘要由CSDN通过智能技术生成

一、component

1.wxml

<block class="custom-progress">
    <view class="progress_box">
        <block wx:for="{
  {progressList}}" wx:key="index" wx:for-index="index" wx:for-item="item">
            <view class="progress_line {
  {index === 0 ?'active':''}}">
                <view class='progress_content '>
                    <view class='progress_title'>{
  {item.title}}</view>
                    <view class='progress_time'>{
  {item.time}}</view>
                </view>
                <view class="left-line-default {
  {( progressList.length > 0 && progressList.length === index+1) ?'last_progress':'left-line'}} "></view>
            </view>
        </bloc