支付寶小程序 UI·步驟條

本示例展示用戶使用小程序的步驟，幫助掌握當前進展。

使用說明

本示例為純客戶端代碼，可直接在模擬器和在真機預覽。

更多詳情請參見 代碼市場。

使用指南

安裝

在 IDE 安裝以下依賴

npm i mashi-open-snippets --save

?注冊

在 JSON 中引入組件路徑

{
  "usingComponents": {
    "move-demo": "components/es/steps"
  }}

調(diào)用

分別在 AXML、JS、ACSS 中輸入以下代碼

<view class="search-main">
  <view class="search-main-box">
    <view class="search-main-box-steps">
      <steps items="{{items}}" activeIndex="{{activeIndex}}"/>
    </view> 
    <view class="search-main-box-card">
      <face-animation-card />
    </view>
  </view></view>

Page({
  data: {
    items: [
      {
        title: "信息確認",
        description: "用戶身份確認"
      },
      {
        title: "功能確認",
        description: "先乘車 后付款"
      }
    ],
    activeIndex: 1
  },
  onLoad() {}});

page {
  background-color: #F7F7F7;}.search-main{
  padding-top:32rpx;}.search-main-box{
  width:702rpx;
  height:905rpx;
  background:#ffffff;
  margin:0 auto;
  border-radius: 16rpx;
  display:flex;
  flex-direction:column;}.search-main-box-steps{
  margin-top:50rpx
}.search-main-box-card{
  margin-top:80rpx
}

屬性