欢迎光临
我们一直在努力
当前位置：九八云安全 行业资讯 正文

九八云百度小程序教程：timeline 时间轴

2024-08-21 分类：行业资讯 阅读(21)
  • timeline 时间轴
    • 属性说明
    • 示例
      • 代码示例

    timeline 时间轴

    解释： 时间轴组件，可配置时间轴内容，时间轴状态以及自定义图标。适用于信息展示，并可放置在页面的任何位置。

    属性说明

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

    status

    String

    否

    wait

    时间轴状态，类型包括：wait、finished、success、error，每个类型对应不同的icon图标以及时间轴展现样式

    title

    String

    否

    时间轴标题

    desc

    String

    否

    时间轴副标题

    descStyle

    String

    否

    时间轴副标题样式

    icon

    String

    否

    自定义 icon 名称

    iconColor

    String

    否

    自定义 icon 颜色

    timeline-class

    String

    否

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

    item-tail-class

    String

    否

    提供时间轴的扩展样式类，供开发者自定义组件样式，可通过此 class 改变时间轴轴线样式

    content-title-class

    String

    否

    提供时间轴的扩展样式类，供开发者自定义组件样式，可通过此 class 改变时间轴标题样式

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例

    • SWAN
    • JS
    • CSS
    • JSON
    
 
      

  
    1. <view class="wrap">
      2. 

  
    2.  <view class="content">
      3. 

  
    3.  <view class="card-panel">
      4. 

  
    4.  <view class="mode-title">
      5. 

  
    5.  <view class="mode-title-line-left"></view>
      6. 

  
    6.  <view class="mode-title-text">单条信息样式</view>
      7. 

  
    7.  <view class="mode-title-line-right"></view>
      8. 

  
    8.  </view>
      9. 

  
    9.  <view class="comp-wrap">
      10. 

  
    10.  <smt-timeline
      11. 

  
    11.  s-for="item, index in options"
      12. 

  
    12.  status="{{item.status}}"
      13. 

  
    13.  title="{{item.title}}"
      14. 

  
    14.  desc="{{item.desc}}"
      15. 

  
    15.  has-tail="{{item.hasTail}}"
      16. 

  
    16.  icon-color="{{item.iconColor}}"
      17. 

  
    17.  timeline-class="comp-timeline"
      18. 

  
    18.  desc-style="
      19. 

  
    19.  {{index === options.length - 1 ? 'font-weight: 700;' : ''}}
      20. 

  
    20.  {{item.status === 'error' ? 'color: #f7534f' : ''}}
      21. 

  
    21.  "
      22. 

  
    22.  >
      23. 

  
    23.  {{item.info}}
      24. 

  
    24.  </smt-timeline>
      25. 

  
    25.  </view>
      26. 

  
    26.  </view>
      27. 

  
    27.  <view class="card-panel">
      28. 

  
    28.  <view class="mode-title">
      29. 

  
    29.  <view class="mode-title-line-left"></view>
      30. 

  
    30.  <view class="mode-title-text">多条信息样式</view>
      31. 

  
    31.  <view class="mode-title-line-right"></view>
      32. 

  
    32.  </view>
      33. 

  
    33.  <view class="comp-wrap">
      34. 

  
    34.  <smt-timeline
      35. 

  
    35.  s-for="item, index in options2"
      36. 

  
    36.  status="{{item.status}}"
      37. 

  
    37.  desc="{{item.desc}}"
      38. 

  
    38.  has-tail="{{item.hasTail}}"
      39. 

  
    39.  icon-color="{{item.iconColor}}"
      40. 

  
    40.  timeline-class="comp-timeline"
      41. 

  
    41.  desc-style="{{
      42. 

  
    42.  index === options.length - 1
      43. 

  
    43.  ? 'font-weight: 700;'
      44. 

  
    44.  : ''
      45. 

  
    45.  }}"
      46. 

  
    46.  >
      47. 

  
    47.  <view
      48. 

  
    48.  class="comp-info-wrap"
      49. 

  
    49.  s-for="descInfo in item.descInfo"
      50. 

  
    50.  >
      51. 

  
    51.  <view class="comp-info">
      52. 

  
    52.  {{descInfo.info}}
      53. 

  
    53.  </view>
      54. 

  
    54.  <view class="comp-title">
      55. 

  
    55.  {{descInfo.title}}
      56. 

  
    56.  </view>
      57. 

  
    57.  </view>
      58. 

  
    58.  </smt-timeline>
      59. 

  
    59.  </view>
      60. 

  
    60.  </view>
      61. 

  
    61.  </view>
      62. 

  
    62. </view>
      63.

    未经允许不得转载：九八云安全 » 九八云百度小程序教程：timeline 时间轴
    分享到

    相关推荐

    攻防案列

    热门文章