甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

创新互联百度小程序教程：steps 步骤条

  • steps 步骤条
    • 属性说明
    • 示例
      • 代码示例

    steps 步骤条

    解释： 步骤条组件，可配置步骤条内容，步骤条状态，步骤条上限为8步。适用于信息输入，并可放置在页面的任何位置。

    属性说明

    steps

    Array

    是

    步骤条数据，最多支持 8 个步骤。steps 示例：[{text: ‘标题文案标题文案标题文案’}, {text: ‘标题文案标题文案标题文案’}]，详细代码请阅读代码示例

    active

    Number

    否

    1

    当前步骤进度

    color

    String

    否

    #ccc

    步骤条默认颜色

    activeColor

    String

    否

    #2b99ff

    当前进度步骤条颜色

    steps-class

    String

    否

    提供步骤条的扩展样式类，供开发者自定义组件样式，可通过此 class 改变步骤条外层样式

    step-class

    String

    否

    提供步骤条的扩展样式类，供开发者自定义组件样式，可通过此 class 改变步骤条内容样式

    step-main-class

    String

    否

    提供步骤条的扩展样式类，供开发者自定义组件样式，可通过此 class 改变步骤条文本样式

    属性名类型必填默认值说明

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例

    • SWAN
    • JS
    • CSS
    • JSON
     
 
 
        
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  默认样式
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  active="{{stepsActive}}"
      7.   
  
  
    7.  line-style="solid"
      8.   
  
  
    8.  steps="{{steps}}"
      9.   
  
  
    9.  active-color="#2772fb"
      10.   
  
  
    10.  step-main-class="step-main"
      11.   
  
  
    11.  >
      12.   
  
  
    12.  
      13.   
  
  
    13.  
      14.   
  
  
    14.  
      15.   
  
  
    15.  bindtap="addStep"
      16.   
  
  
    16.  class="step-btn-cls"
      17.   
  
  
    17.  hover-stop-propagation="true"
      18.   
  
  
    18.  type="primary"
      19.   
  
  
    19.  >
      20.   
  
  
    20.  点击按钮添加步骤
      21.   
  
  
    21.  
      22.   
  
  
    22.  
      23.   
  
  
    23.  
      24.   
  
  
    24.  执行展示
      25.   
  
  
    25.  
      26.   
  
  
    26.  
      27.   
  
  
    27.  active="{{fourStepsActive}}"
      28.   
  
  
    28.  line-style="solid"
      29.   
  
  
    29.  steps="{{fourSteps}}"
      30.   
  
  
    30.  active-color="#2772fb"
      31.   
  
  
    31.  step-main-class="step-main"
      32.   
  
  
    32.  >
      33.   
  
  
    33.  
      34.   
  
  
    34.  
      35.   
  
  
    35.  
      36.   
  
  
    36.  bindtap="changeActive"
      37.   
  
  
    37.  class="step-btn-cls"
      38.   
  
  
    38.  hover-stop-propagation="true"
      39.   
  
  
    39.  type="primary"
      40.   
  
  
    40.  >
      41.   
  
  
    41.  点击按钮执行步骤
      42.   
  
  
    42.  
      43.   
  
  
    43.  
      44.   
  
  
      45.

    本文名称：创新互联百度小程序教程：steps 步骤条
    网页路径：https://chengdu.cdxwcx.cn/article/copegds.html

    其他资讯