小程序開發-iView Weapp的步驟條


iView Weapp的步驟條

這個步驟條真是個好組件,效果如下:

代碼如下:

<i-steps>
    <i-step status="finish" icon="barrage">
        <view slot="title">
              已完成
        </view>
        <view slot="content">
            這里是該步驟的描述信息
        </view>
    </i-step>
    <i-step status="process" icon="brush">
        <view slot="title">
            進行中
        </view>
        <view slot="content" icon="camera">
            這里是該步驟的描述信息
        </view>
    </i-step>
    <i-step  icon="collection">
        <view slot="title">
            錯誤
        </view>
        <view slot="content">
            這里是該步驟的描述信息
        </view>
    </i-step>
</i-steps>

使用說明:
Steps 屬性

  1. current 當前步驟, 從0 開始計數
  2. status 當前狀態, 可選值為 wait、process、finish、error
  3. direction 步驟條的方向,可選值為 horizontal(水平)或 vertical(垂直)

Step

  1. status 步驟的狀態,可選值為 wait、process、finish、error,不設置時自動判斷
  2. title 步驟的標題
  3. content 步驟的詳細描述,可選
  4. icon 步驟的圖標,可選

測試發現一個很尷尬的點: i-step 使用icon屬性時,模擬器演示時圖標沒有居中顯示,有點偏下,看起來怪怪的,真機看了下又是正常的

不管怎樣,先存下來,看后面用不用的着


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM