steps简易步骤条的制作

Posted on | In

前言

这是来到新公司的第一篇博客，上周学习了一周React、Redux、TypeScript，这周可以干活了。今天看了设计稿，十分的好看，特别是那块步骤条。好看的同时呢，实现起来好像还是有些难度，花了一个多钟的时间把步骤条给写了出来，那么现在我来分享一下吧

先上效果图

image

image

image

让我们开始吧

html部分

这里的HTML部分十分的简单，但是我用的是React里边的TSX语法，这里放出来大家需要的话自行转化成HTML语法就好了

1
2
3
4
5
6
7
8
9
10
11
render () {
    return (
      <View className='addServiceAPage'>
        <View class="steps">
            <View className="stepsList active">名称</View>
            <View className="stepsList">价格</View>
            <View className="stepsList">简介、图片</View>
        </View>
      </View>
    )
  }

再放一个精简版本供大家复制粘贴吧

1
2
3
4
5
<ul class="steps">
    <li class="active">名称</li>
    <li>价格</li>
    <li>简介、图片</li>
</ul>

css部分

css代码有点长，我一步一步来解释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.steps {
  position: relative;
  margin-bottom: 30px;
  counter-reset: step;  /*创建步骤数字计数器*/
}
/*步骤描述*/
.steps li {
  list-style-type: none;
  font-size: 12px;
  text-align: center;
  width: 33%;
  position: relative;
  float: left;
}

首先先把ul和三个li排版好，让它浮动偏左，或者用Flex布局都可以，并设置好它的宽度。这里要注意的是css的counter-reset属性，对部分和子部分进行编号（比如 “Section 1”、”1.1”、”1.2”），这里我用它定义每个步骤的编号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*步骤数字*/
.steps li:before {
  display: block;
  content: counter(step); /*设定计数器内容*/
  counter-increment: step;  /*计数器值递增*/
  width: 32px;
  height: 32px;
  background-color: #019875;
  line-height: 32px;
  border-radius: 32px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 700;
  margin: 0 auto 8px auto;
}
 
/*连接线*/
.steps li ~ li:after {
  content: '';
  width: 100%;
  height: 2px;
  background-color: #019875;
  position: absolute;
  left: -50%;
  top: 15px;
  z-index: -1; /*放置在数字后面*/
}

这里用了 :before，:after两个伪类分别定义步骤条里边的编号和它们的连接线。特别注意 content: counter(step); 和 counter-increment: step;，这里将父元素定义的编号在这里渲染出来。

1
2
3
4
5
6
7
8
9
10
11
12

/*将当前/完成步骤之前的数字及连接线变绿*/
.steps li.active:before,
.steps li.active:after {
  background-color: #019875;
}
 
/*将当前/完成步骤之后的数字及连接线变灰*/
.steps li.active ~ li:before,
.steps li.active ~ li:after {
  background-color: #777;
}

最后设置 active属性，改变高亮前后的编号背景颜色以及连接线的背景颜色

The end.. 多谢大家的观看