0
点赞
收藏
分享

微信扫一扫

uniapp 手写 Steps 步骤条

效果图:

uniapp 手写 Steps 步骤条_服务器

image.png

然后添加一步后:


uniapp 手写 Steps 步骤条_数据_02

image.png

css

.tl-steps{
display: flex;
justify-content: center;
align-items: center;
}

.tl-dot{
width: 30rpx;
height: 30rpx;
border-radius: 50%;
}
.tl-line{
width: 250rpx;
border: 1px solid #CCCCCC;
}
.tl-line-green{
width: 250rpx;
border: 1px solid #4DB046;
}
.tl-green{
background: #4DB046 !important;
}
.tl-gray{
background: #DCDCDC;;
}

html


<view class="tl-steps">
<view class="tl-dot tl-green"></view>
<view class="tl-line" :class="lineShow ? 'tl-line-green' : ''"></view>
<view class="tl-dot tl-gray" :class="lineShow ? 'tl-green' : ''"></view>
<view class="tl-line" :class="show3 ? 'tl-line-green' : ''"></view>
<view class="tl-dot tl-gray" :class="show3 ? 'tl-green' : ''"></view>
</view>

js

data(){
return(
show1: true,//第1步
show2: false,//第2步
lineShow: false,
show3: false,//第3步
)
}

隐私、权限声明

  1. 本插件需要申请的系统权限列表:
  2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:
  3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

隐私、权限声明

  1. 本插件需要申请的系统权限列表:
  2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:
  3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

隐私、权限声明

  1. 本插件需要申请的系统权限列表:
  2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:
  3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

隐私、权限声明

  1. 本插件需要申请的系统权限列表:
  2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:
  3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:
举报

相关推荐

0 条评论