小程序物流跟踪进度与伪类样式

image.png

在开发者工具中预览效果
电商平台少不了物流信息的跟踪，如上图，我们该如何做到呢？
来看看的下面的解析图：

1. 从wxml中可以看到，我们是遍历了一个数组才有了图一的列表，而列表的主要有两个容器组成 l_box 和 l_content。
2. 从审查元素可以看出，其实竖直线是l_box 的border ,而圈圈是l_box的一个after伪类。该伪类为一个有background和border的圆。
3. 而小三角为l_content的after伪类
4. 圈圈和小三角的默认颜色都是灰色，那什么时候变成亮色呢？ 就是根据数组的index来判断啦。

image.png

wxml代就如上图，具体的css样式如下：

page{
  background: #f2f2f2;
}

.container{
  margin-top: 20rpx;
  font-size: 28rpx;
  background-color: #fff;
}
.l_title{
  padding: 10rpx 20rpx;
  border-bottom: 1px solid #f2f2f2;
}

.l_box{
  border-left: 1px solid #EEF0F2;
  padding: 20rpx 0 20rpx 50rpx;
  margin-left: 30rpx;
  position: relative;
}
.l_box::after{
  content: '';
  display: inline-block;
  position: absolute;
  left: -15rpx;
  top: 60rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 20rpx;
  background: #BDBDBD;
  border: 2px solid #EEE;
}
.l_content{
  position: relative;
  background: #eef0f2;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  font-size: 26rpx;
}
.l_content::after{
  content: '';
  display: inline-block;
  position: absolute;
  left: -20rpx;
  top: 36rpx;
  border-left: 20rpx solid #fff;
  border-bottom: 20rpx solid #eef0f2;
}
.l_first{
  border-left: 1px solid #eeb60e;
}
.l_first::after{
  background: #eeb60e;
  border: 2px solid #EEE;
}
.l_first_content{
  background: #06a943;
  color: #fff;
}
.l_first_content::after{
  border-bottom-color: #06a943;
}