Steps步骤条

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-steps": "/miniprogram_npm/vtuweapp/steps/steps/vtu-steps",
    3.     "vtu-step": "/miniprogram_npm/vtuweapp/steps/step/vtu-step"
    4. }
    5.

    代码演示

    基础用法

    1. <vtu-steps value="{{value1}}" shape="number">
    2.   <vtu-step title="待支付" des="描述问题"></vtu-step>
    3.   <vtu-step title="待发货" des="描述问题"></vtu-step>
    4.   <vtu-step title="待收货" des="描述问题"></vtu-step>
    5.   <vtu-step title="待评价" des="描述问题"></vtu-step>
    6. </vtu-steps>
    7.

    居中

    1. <vtu-steps value="{{value1}}" shape="icon" align-center>
    2.   <vtu-step title="待支付" des="描述问题" icon="iconfont icon-biaoxingfill"></vtu-step>
    3.   <vtu-step title="待发货" des="描述问题" icon="iconfont icon-xihuanfill"></vtu-step>
    4.   <vtu-step title="待收货" des="描述问题" icon="iconfont icon-yuanxingxuanzhongfill" active-icon="iconfont icon-x" active-color="red"></vtu-step>
    5.   <vtu-step title="待评价" des="描述问题" icon="iconfont icon-xihuanfill" active-color="orange"></vtu-step>
    6. </vtu-steps>
    7.

    点状-添加状态

    1. <vtu-steps value="{{value1}}" shape="spot" align-center>
    2.   <vtu-step title="待支付" des="描述问题"></vtu-step>
    3.   <vtu-step title="待发货" des="描述问题" status="wait"></vtu-step>
    4.   <vtu-step title="待收货" des="描述问题" status="warning"></vtu-step>
    5.   <vtu-step title="待评价" des="描述问题"></vtu-step>
    6. </vtu-steps>
    7.

    圆角-自定义颜色

    1. <vtu-steps value="{{value1}}" shape="square" active-color="orange" align-center>
    2.   <vtu-step title="待支付" des="描述问题"></vtu-step>
    3.   <vtu-step title="待发货" des="描述问题"></vtu-step>
    4.   <vtu-step title="待收货" des="描述问题"></vtu-step>
    5.   <vtu-step title="待评价" des="描述问题"></vtu-step>
    6. </vtu-steps>
    7.

    自定义icon

    1. <vtu-steps value="{{value1}}" shape="icon" align-center>
    2.   <vtu-step title="待支付" des="描述问题" icon="iconfont icon-biaoxingfill"></vtu-step>
    3.   <vtu-step title="待发货" des="描述问题" icon="iconfont icon-daohang"></vtu-step>
    4.   <vtu-step title="待收货" des="描述问题" icon="iconfont icon-yuanxingxuanzhongfill" active-icon="iconfont icon-x" active-color="red"></vtu-step>
    5.   <vtu-step title="待评价" des="描述问题" icon="iconfont icon-xihuanfill" active-color="orange"></vtu-step>
    6. </vtu-steps>
    7.

    竖直-自定义内容

    1. <vtu-steps value="{{value1}}" direction="vertical" shape="spot">
    2.   <vtu-step title="已到达北京" des="2012-12-22 12:33:23 已到达北京三里屯快递站"></vtu-step>
    3.   <vtu-step title="已发往郑州" des="2012-12-22 17:43:22 已扫描装车，发往郑州转运站"></vtu-step>
    4.   <vtu-step title="待收货" des="查看装货进度" name="name3" icon="iconfont icon-daohang"></vtu-step>
    5.   <vtu-step title="待评价" name="name4"></vtu-step>
    6.   <vtu-progress slot="name3" value="95" circle color="red" stroke-width="5px"></vtu-progress>
    7.   <vtu-rate slot="name4" value="1" count="5" size="16px" disabled="{{value1 != 3}}" bind:change="bindChange" active-color="red"></vtu-rate>
    8. </vtu-steps>
    10. Page({
    11.   data: {
    12.     value1: 0
    13.   },
    15.   next1 (){
    16.     this.setData({
    17.       value1: this.data.value1>2?0: this.data.value1 + 1
    18.     })
    19.   }
    20. });
    21.  
    22.

    .json文件

              {
    "usingComponents": {
        "vtu-steps": "/miniprogram_npm/vtuweapp/steps/steps/vtu-steps",
        "vtu-step": "/miniprogram_npm/vtuweapp/steps/step/vtu-step",
        "vtu-rate": "/miniprogram_npm/vtuweapp/rate/vtu-rate",
        "vtu-progress": "/miniprogram_npm/vtuweapp/progress/vtu-progress"
    }
}

    组件参数

    Steps Props

    参数说明类型默认值必填
    value当前激活标签的索引Number-否
    shape步骤显示形状。number：数字/spot：点状/icon：图标/square：正方形String-否
    align-center步骤居中Booleanfalse否
    color默认图标文字颜色String-否
    active-color激活时图标文字颜色String-否
    direction步骤方向，horizontal：水平/vertical：垂直Stringhorizontal否

    Step Props

    参数说明类型默认值必填
    title步骤标题String-否
    des步骤描述String-否
    status状态，wait / success / warning / errorString-否
    icon图标String-否
    active-ccon激活时图标String-否
    color颜色String-否
    active-color激活时颜色String-否
    name用于插槽时的唯一标识String-否

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Steps 步骤条 - 图1