1. uni-App 插件 ColorUI 步骤条
1.1. 前言
uni-App 就不介绍了, 前面几篇已经有所介绍, 不知道的可以翻看我前面几篇博客
ColorUI-uniApp https://ext.dcloud.net.cn/plugin?id=239 是 uni-App 的一款 ui 组件, 事实上就是对 uni-App 组件添加 CSS, 使其更加漂亮
这里我抛砖引玉的介绍一下步骤条的使用, 之所以介绍它是因为使用它的过程中, 发现的几点问题
第一它本身的例子太过简单, 但事实上它是可以实现的更复杂的
第二它本身带有很多 CSS 样式是可以直接拿来用的, 不需要自己改造自己写
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>
前面代码的例子中有个表示 X 的代码, 但那是用 class 为
cuIcon-roundclosefill
, 一旦我替换 num 属性就变成这样了, 之后可能还要不断去调整样式
事实上还有其它更好的方法, 如下改法, 我在需要的 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>
至于我怎么发现的, 那就是直接找源码, 可以看到在 main.CSS 中
1.3. 总结
这里就给出个思路, 希望帮到有需要的人, 共同学习进步
来源: http://www.bubuko.com/infodetail-3103321.html