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. 比如如下實現

2. 他的例子每一步都是完成藍色背景，中間勾選，但如果我中間取消訂單呢，我想要顯示個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>

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

4. 事實上還有其它更好的方法，如下改法，我在需要的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>

5. 至於我怎么發現的，那就是直接找源碼，可以看到在main.css中

1.3. 總結

1. 這里就給出個思路，希望幫到有需要的人，共同學習進步