需求:
微信小程序中实现水平步骤条
问题:
无论是微信原生或者是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类名