uni-app插件ColorUI步驟條

1. uni-app插件ColorUI步驟條

1.1. 前言

1. uni-app就不介紹了，前面幾篇已經有所介紹，不知道的能夠翻看我前面幾篇博客
2. ColorUI-uniApp是uni-app的一款ui組件，事實上就是對uni-app組件添加css，使其更加漂亮
3. 這裏我拋磚引玉的介紹一下步驟條的使用，之因此介紹它是由於使用它的過程當中，發現的幾點問題
   • 第一它自己的例子太過簡單，但事實上它是能夠實現的更復雜的
   • 第二它自己帶有不少css樣式是能夠直接拿來用的，不須要本身改造本身寫

1.2. 例子

1. 好比以下實現

1. 他的例子每一步都是完成藍色背景，中間勾選，但若是我中間取消訂單呢，我想要顯示個X，而且紅色背景，先看它的例子代碼，我用的是最後的多級顯示

<scroll-view scroll-x class="bg-white padding response cu-steps steps-bottom" :scroll-into-view="'scroll-' + scroll"
 scroll-with-animation>
    <view class="cu-item padding-lr-xl" :class="index>scroll?'':'text-blue'" v-for="(item,index) in 10" :key="index" :id="'scroll-' + index">
        Level {{index + 1}} <text class="num" :data-index="index + 1"></text>
    </view>
</scroll-view>

1. 前面代碼的例子中有個表示X的代碼，但那是用class爲cuIcon-roundclosefill，一旦我替換num屬性就變成這樣了，以後可能還要不斷去調整樣式

1. 事實上還有其它更好的方法，以下改法，我在須要的item添加isErr屬性，爲true時顯示紅色，text中添加err類屬性就會把圖標修改爲X

<view class="cu-item padding-lr-xl" :class="item.status>step.scroll?'':item.isErr?'text-red':'text-blue'" v-for="(item,index) in 10" :key="index" :id="'scroll-' + index">
        Level {{index + 1}} <text class="num err" :data-index="index + 1"></text>
    </view>

1. 至於我怎麼發現的，那就是直接找源碼，能夠看到在main.css中

1.3. 總結

1. 這裏就給出個思路，但願幫到有須要的人，共同窗習進步