微信小程序步骤条，第一步和最后一步水平居中

需求：

微信小程序中实现水平步骤条

问题：

无论是微信原生或者是Vant步骤条均没有实现第一步和最后一步文字居中

vant步骤条样式

实现

1、自己手动撸步骤条插件—>下载地址

2、在微信json文件内引入组件

"usingComponents": {
    "step-list":"组件路径/step/step"
  }

3、wxml内

<step-list stepArr="{{stepArr}}" active='2'></step-list>

4、wxjs内

data: {
    stepArr:[
	    {name:'步骤一'},
	    {name:'步骤二'},
	    {name:'步骤三'},
	    {name:'步骤四'},
	    {name:'步骤五'},
    ]
  },

5、效果

组件文档说明：

stepArr：步骤条说明文字，数组类型

stepArr:[{name:'步骤名称'}]

active： Number当前选中的第几步，从0开始

round：String 未完成状态的圆形样式class类名

roundActive：String 完成状态的圆形样式class类名

line：String 未完成状态的连接线样式class类名

lineActive：String 完成状态的连接线样式class类名

name：String 未完成状态的文字样式class类名

nameActive：String 完成状态的文字样式class类名