微信小程序实现步骤条-类似vantweapp（三）

程序猿向前跑

已于 2022-10-25 14:58:49 修改

阅读量470

点赞数 1

分类专栏：移动端文章标签：微信小程序 javascript 前端

于 2022-10-25 14:45:30 首次发布

本文链接：https://blog.csdn.net/qq_46199553/article/details/127513005

版权

移动端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<view class="border-left" wx:for="{{customStepItems}}">
                <view class="flex" style="margin-left: 30rpx;">
                  <van-icon name="passed" class="pass" wx:if="{{item.businessContent!='拒绝'||item.businessContent==null||item.businessContent==''}}"/>
                  <van-icon slot="icon" class="pass"  name="close" wx:else style="color: red;background-color: white;"/>
                  <view>{{item.createDatetime}}</view>
                </view>
                <view class="flex jc-between margin-top-10 padding-bottom-10" style="margin-left: 30rpx;">
                    <view class="font-weight-700" style="color: black;">{{item.business}}</view>
                    <view>操作人：张三</view>
                </view>
                <view style="margin-left:30rpx;padding-bottom: 20rpx;">{{item.businessContent}}</view>
            </view>

css样式

.border-left{
position: relative;
border-left: 2rpx solid rgb(12, 96, 223);
margin-left: 40rpx;
}
.pass{
position: absolute;
left: -16rpx;
background-color: #fff;
font-size: 34rpx;
color: green;
}
在这里插入图片描述
index.json引入
“van-icon”: “@vant/weapp/icon/index”,
参考
vant官网文档
也就完成了效果